/* Extra Large Desktop screens (>= 1200px): 5 product columns on full-width pages */
@media (min-width: 1200px) {
  .col-lg-jr {
    flex: 0 0 20%;
    max-width: 20%;
    width: 20%;
  }
}

/* Desktop screens (992px – 1199.98px): 4 product columns (25% each) on full-width pages */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .col-lg-jr {
    flex: 0 0 25%;
    max-width: 25%;
    width: 25%;
  }
}

/* Tablet (768px – 991.98px): 3 product columns (33.33% each) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .col-lg-jr,
  .shop_container.grid .col-lg-jr,
  .shop_container:not(.list) .col-lg-jr {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
  }
}

/* Mobile (<= 767.98px): 2 product columns (50% each) */
@media (max-width: 767.98px) {
  .col-lg-jr,
  .shop_container.grid .col-lg-jr,
  .shop_container:not(.list) .col-lg-jr {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}

/* Frequent products: 3 cols at 768, 5 at 1024, 6 from 1440 */
@media (min-width: 1024px) {
  .frequent-products-grid > [class*="col-"] {
    flex: 0 0 auto;
    width: 20%;
    max-width: 20%;
  }
}
@media (min-width: 1440px) {
  .frequent-products-grid > [class*="col-"] {
    flex: 0 0 auto;
    width: 16.66666667%;
    max-width: 16.66666667%;
  }
}

/* My Account frequent products (beside sidebar): 2 / 2 / 3 / 4 */
@media (min-width: 1024px) {
  .account-frequent-products-grid > [class*="col-"] {
    flex: 0 0 auto;
    width: 33.33333333%;
    max-width: 33.33333333%;
  }
}
@media (min-width: 1440px) {
  .account-frequent-products-grid > [class*="col-"] {
    flex: 0 0 auto;
    width: 25%;
    max-width: 25%;
  }
}
.text-right {
  text-align: right !important;
}

.btn-custom-cart {
  padding: 6px !important;
  margin-left: 0px;
  font-size: 13px;
  margin-top: 5px;
  text-transform: uppercase;
}

.cat-image {
  width: auto;
  height: 30.5px;
  padding: 4px;
  vertical-align: middle;
  margin-right: 10px;
  line-height: 30px;
}

/*.middle-header {
  box-shadow: 0 0 5px rgba(0,0,0,0.15);
}*/

.login_register_wrap {
  padding: 50px 0;
}

.page-content table {
  border-collapse: separate;
  border-spacing: 5px 5px;
  color: #000;
  border: none;
  width: 90%;
}

.page-content td {
  background-color: #eee;
}

.page-content th {
  background-color: #000;
  color: #fff;
}

.page-content th,
.page-content td {
  padding: 5px 10px;
  text-align: left;
  vertical-align: middle;
}

.page-content tr:nth-child(1) td {
  background-color: var(--main);
}

.page-content tr:nth-child(1) td p {
  color: #fff;
  text-align: center;
  margin: 5px 0;
}

.page-content th:nth-child(2),
.page-content td:nth-child(2),
.page-content th:nth-child(3),
.page-content td:nth-child(3) {
  text-align: center;
}

.section {
  padding: 50px 0 !important;
}
.breadcrumb_section.page-title-mini {
  padding: 8px 0 !important;
}
.breadcrumb_section .page-title h1 {
  margin: 0 !important;
  line-height: 1.2 !important;
  font-size: 22px !important;
}
.breadcrumb_section .page-title + .breadcrumb,
.breadcrumb_section .breadcrumb {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}

.product_img_box {
  text-align: center;
}

.product_price {
  float: none !important;
  margin-bottom: 8px;
  align-items: center;
  display: flex;
  justify-content: center;
}

.product-meta li {
  margin-top: 5px !important;
}

.custome-radio .form-check-label {
  display: block;
  position: relative;
  padding-left: 28px;
}

.custome-radio .form-check-label::before {
  position: absolute;
  top: 3px;
  left: 0;
  margin: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 2px solid #908f8f;
  border-radius: 50%;
  background: #fff;
  vertical-align: top;
}

.custome-radio input[type="radio"] + .form-check-label::after {
  position: absolute;
  top: 3px;
  left: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  box-sizing: border-box;
  background-color: var(--main);
  border-radius: 50%;
  transform: scale(0.45);
  transform-origin: center center;
  opacity: 0;
}

.custome-radio p {
  padding-left: 0;
  margin: 0;
  color: #000;
}

#navCatContent {
  z-index: 999 !important;
}

#navCatContent li a:hover {
  color: inherit;
}

#navCatContent .category-row:hover .category-link,
#navCatContent li.has-subcategories:hover > .category-row .category-link {
  color: #fff !important;
}

.footer_top {
  padding: 30px 70px !important;
}

/* Product cards: image + info in one card, hug content */
.shop_container > [class*="col-"] {
  display: flex;
  margin-bottom: 16px;
}

.product,
.product_wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0;
  position: relative;
  border-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.product:hover,
.product_wrap:hover {
  border-color: #cfd6e0;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
  transform: translateY(-2px);
}

.product > a,
.product_wrap > a {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  text-decoration: none;
}

.product_img {
  position: relative;
  display: block !important;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  max-height: none !important;
  /* White tile: product photos are uploaded with all kinds of backgrounds
     (mostly white). A white tile lets those blend in seamlessly instead of
     floating as a white rectangle on a grey gap. The subtle border keeps the
     tile defined even when a product has no image. */
  background: #fff;
  border: 1px solid #eef1f5;
  border-radius: 8px;
  overflow: hidden;
  text-align: center !important;
}

.product_img img {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: block;
  width: auto !important;
  max-width: calc(100% - 16px);
  height: auto !important;
  max-height: calc(100% - 16px);
  margin: auto;
  object-fit: contain;
}

/* =========================================================
   Grid Section Image Styles (Edits here only affect Grid View)
   ========================================================= */
.shop_container.grid .product_img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: none !important;
  border-bottom: 1px solid #eef1f5 !important;
  border-radius: 0px !important;
}

.shop_container.grid .product_img img {
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  object-fit: contain;
}

.product_img::before {
  content: none !important;
  min-height: 0 !important;
}

.product_info {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 8px;
  padding: 12px 14px 14px !important;
  text-align: left !important;
}

.container .product .product_info {
  text-align: left;
}

.product .product_title,
.product_box .product_title,
.product_wrap .product_title {
  min-height: 0 !important;
  margin: 0;
  white-space: normal !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  line-height: 1.35 !important;
  font-size: 13px !important;
  font-weight: 600;
  text-align: left !important;
  text-transform: none;
  color: #1f2937;
}

.product .product_title a,
.product_box .product_title a,
.product_wrap .product_title a {
  color: inherit;
  text-decoration: none;
}

.product .product_title a:hover,
.product_box .product_title a:hover,
.product_wrap .product_title a:hover {
  color: var(--main);
}

.product_price {
  margin-bottom: 0;
}

.product_price .price {
  font-size: 24px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .product_price .price {
    font-size: 19px;
  }
}

.container .product .product_info .cart-product-quantity {
  width: auto;
  margin: 0;
}

/* ==========================================================================
   Unified Quantity Stepper Component (Grid, List, Cart, PDP, Quick Order)
   ========================================================================== */
.quantity,
.cart-product-quantity .quantity,
.product_info .quantity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

.quantity .minus,
.quantity .plus,
.quantity input.minus,
.quantity input.plus,
.quantity button.minus,
.quantity button.plus {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  flex: 0 0 28px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}

.quantity .minus:hover,
.quantity .plus:hover,
.quantity input.minus:hover,
.quantity input.plus:hover,
.quantity button.minus:hover,
.quantity button.plus:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.quantity .minus:active,
.quantity .plus:active,
.quantity input.minus:active,
.quantity input.plus:active,
.quantity button.minus:active,
.quantity button.plus:active {
  background: #e2e8f0 !important;
  transform: scale(0.95) !important;
}

.quantity .qty,
.quantity input.qty {
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
  width: 38px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  text-align: center !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 26px !important;
  color: #0f172a !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  flex: 0 0 38px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Remove number input spinner arrows */
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.quantity .qty:focus,
.quantity input.qty:focus {
  border-color: var(--main, #126bf5) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(18, 107, 245, 0.15) !important;
}

.product_info .btn-custom-cart,
.product_info .text-center .btn-custom-cart,
.shop_container:not(.list) .product_info .btn-custom-cart,
.shop_container:not(.list) .product_price_qty .btn-custom-cart {
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 6px !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  /* border-radius: 8px !important; */
}

.product_info > .text-center,
.product_price_qty .text-center,
.shop_container:not(.list) .product_price_qty .text-center {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

.qty_in_cart_list {
  margin: 0;
}

.qty_in_cart_list > p {
  margin: 0;
  text-align: left;
  font-size: 12px;
  color: #6b7280;
}

/* ==========================================================================
   Category LIST View — mockup layout:
   [ Image ] | Title                              ♡
             | [ Promo pill ]
             | $price              [N in cart]
             | ( - 1 + )     [ ADD TO CART ]
   ========================================================================== */

/* List View: 1 single column on all screens (1 product per row) */
.shop_container.list > [class*="col-"],
.shop_container.list > .col-lg-jr,
.products-main-col .shop_container.list .col-lg-jr {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-bottom: 20px !important;
}

/* Card container */
.shop_container.list .product,
.shop_container.list .product_wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 16px !important;
  padding: 14px !important;
  gap: 16px !important;
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.06) !important;
  transition: all 0.2s ease-in-out !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.shop_container.list .product:hover,
.shop_container.list .product_wrap:hover {
  border-color: #d5d9e0 !important;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.1) !important;
  transform: none !important;
}

/* Left side product image */
.shop_container.list .product > a,
.shop_container.list .product_img {
  flex: 0 0 110px !important;
  width: 110px !important;
  max-width: 110px !important;
  height: 110px !important;
  aspect-ratio: 1 / 1 !important;
  float: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.shop_container.list .product_img img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Right side: title, promo pill, price+cart, qty+ATC */
.shop_container.list .product_info {
  flex: 1 1 auto !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-areas:
    "title title"
    "promo promo"
    "price incart"
    "qty atc" !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 6px !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  overflow: visible !important;
}

.shop_container.list .product_info:not(:has(.product_price)) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 8px !important;
}

.shop_container.list .product_info .product_price_qty {
  display: contents !important;
}

.shop_container.list .product_info:not(:has(.product_price)) .product_price_qty {
  display: block !important;
  width: auto !important;
}

.shop_container.list .product:has(.promo-flag),
.shop_container.list .product_wrap:has(.promo-flag) {
  padding-top: 14px !important;
  overflow: hidden !important;
}

.shop_container.list .product .promo-flag {
  grid-area: promo !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  flex: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 10px !important;
  background: #f3f4f6 !important;
  color: var(--main) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
.shop_container.list .product .promo-flag::before {
  display: none !important;
}
.shop_container.list .product .promo-flag span {
  width: auto;
  max-width: 100%;
  color: var(--main) !important;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
}

/* Title */
.shop_container.list .product_info .product_title,
.shop_container.list .product_info .product_title a {
  grid-area: title !important;
  flex: none !important;
  width: 100% !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding-right: 0 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.shop_container.list .product_info .product_title a:hover {
  color: var(--main) !important;
}

/* Price (left) + in-cart (right) */
.shop_container.list .product_info .product_price,
.shop_container.list .product_info .product_price_qty .product_price {
  grid-area: price !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  width: auto !important;
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--main) !important;
  white-space: nowrap !important;
  height: auto !important;
  line-height: 1.2 !important;
  float: none !important;
  text-align: start !important;
}

.shop_container.list .product_info .product_price .price {
  color: var(--main) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  text-align: start !important;
}

.shop_container.list .product_info .product_price del {
  font-size: 13px !important;
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

.shop_container.list .product_info .qty_in_cart_list {
  grid-area: incart !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  justify-self: end !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex: none !important;
}

.shop_container.list .product_info .qty_in_cart_list.is-empty {
  display: none !important;
  visibility: hidden !important;
}

.shop_container.list .product_info .qty_in_cart_list > p {
  padding: 4px 10px !important;
  border-radius: 12px !important;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  color: #64748b !important;
}

/* Qty (left) + Add to Cart (right) in List view */
.shop_container.list .product_info .cart-product-quantity,
.shop_container.list .product_info .product_price_qty .cart-product-quantity {
  grid-area: qty !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  height: auto !important;
  float: none !important;
  justify-content: flex-start !important;
}

.shop_container.list .product_info > .text-center,
.shop_container.list .product_info .add-to-cart,
.shop_container.list .product_info .btn-custom-cart,
.container .shop_container.list .product .product_info > .text-center,
.container .shop_container.list .product .product_info .add-to-cart,
.container .shop_container.list .product .product_info .btn-custom-cart {
  grid-area: atc !important;
  justify-self: end !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.shop_container.list .product_info .add-to-cart .btn,
.shop_container.list .product_info .add-to-cart a,
.shop_container.list .product_info .add-to-cart button,
.shop_container.list .product_info .btn-custom-cart .btn,
.shop_container.list .product_info .btn-custom-cart a,
.shop_container.list .product_info .btn-custom-cart button,
.shop_container.list .product_info > .text-center .btn,
.shop_container.list .product_info > .text-center a,
.shop_container.list .product_info > .text-center button {
  width: auto !important;
  text-align: center !important;
  justify-content: center !important;
}

.shop_container.list .product_info .product_price_qty > .text-center {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-start !important;
  width: auto !important;
  margin: 0 !important;
}

.shop_container.list > [class*="col-"] {
  min-width: 0;
}
.shop_container.list .product_info > *,
.shop_container.list .product_info .product_title,
.shop_container.list .product_info .product_title a {
  min-width: 0;
}
.shop_container.list .product .promo-flag span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Phone / small tablet: keep image + details on one row, stack qty then ATC */
@media (max-width: 767.98px) {
  .shop_container.list > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 12px !important;
  }
  .shop_container.list .product,
  .shop_container.list .product_wrap {
    padding: 10px !important;
    gap: 10px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .shop_container.list .product > a,
  .shop_container.list .product_img {
    flex: 0 0 72px !important;
    width: 72px !important;
    max-width: 72px !important;
    height: 72px !important;
    align-self: flex-start !important;
  }
  .shop_container.list .product_info {
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "title title"
      "promo promo"
      "price incart"
      "qty atc" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .shop_container.list .product_info .product_price {
    grid-area: price !important;
    justify-self: start !important;
    align-self: center !important;
    font-size: 15px !important;
    margin: 0 !important;
  }
  .shop_container.list .product_info .qty_in_cart_list {
    grid-area: incart !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }
  .shop_container.list .product_info .cart-product-quantity {
    grid-area: qty !important;
    justify-self: start !important;
  }
  .shop_container.list .product_info .product_title,
  .shop_container.list .product_info .product_title a {
    font-size: 13px !important;
    min-width: 0 !important;
    padding-right: 28px !important;
  }
  .shop_container.list .product:has(.offer-icon) .product_title {
    padding-right: 28px !important;
  }
  .shop_container.list .product .promo-flag {
    max-width: 100% !important;
    padding: 4px 10px !important;
  }

  .shop_container.list .product_info > .text-center,
  .shop_container.list .product_info .add-to-cart,
  .shop_container.list .product_info .btn-custom-cart,
  .container .shop_container.list .product .product_info > .text-center,
  .container .shop_container.list .product .product_info .add-to-cart,
  .container .shop_container.list .product .product_info .btn-custom-cart {
    grid-area: atc !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    height: 28px !important;
    line-height: 28px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* ==========================================================================
     Mobile Footer Optimization (Compact & Reduced Size)
     ========================================================================== */
  .footer_top {
    padding: 24px 16px 16px 16px !important;
  }

  .footer_top .shop-footer-row {
    row-gap: 22px;
  }

  .footer_dark .footer_logo {
    margin-bottom: 8px !important;
  }

  .footer_dark .footer_logo img,
  .footer_logo img {
    max-height: 38px !important;
    width: auto !important;
    max-width: 180px !important;
    margin-bottom: 0 !important;
  }

  footer .widget,
  footer .widget.mb-0 {
    margin-bottom: 0 !important;
  }

  footer .widget_title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
  }

  footer p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .contact_info > li {
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .contact_info li i {
    font-size: 14px !important;
    margin: 2px 0 0 0 !important;
    flex-shrink: 0 !important;
  }

  .contact_info i + * {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    display: block !important;
  }

  .widget_links li {
    padding-bottom: 6px !important;
  }

  .widget_links li a {
    font-size: 12.5px !important;
  }

  .widget_playstore {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .widget_playstore li {
    list-style: none !important;
    margin: 0 !important;
  }

  .widget_playstore li a img {
    height: 34px !important;
    width: auto !important;
  }

  .bottom_footer {
    padding: 12px 16px !important;
  }

  .bottom_footer p {
    font-size: 11.5px !important;
    margin: 0 !important;
  }
}

.page a {
}

.page a:hover {
  background-color: var(--main);
  border-color: var(--main);
  color: #fff;
}

.page a {
  display: block;
  border: 2px solid #dee2e6;
  border-radius: 0 !important;
  color: #687188;
  margin-left: 0px;
  line-height: 36px;
  height: 40px;
  width: 40px;
  text-align: center;
  padding: 0px;
  z-index: 1;
}

.navbar-brand img {
  width: 300px;
  /* height: 100px; */
  max-width: 350px;
  object-fit: contain;
}
.bottom_footer {
  padding: 10px 0 !important;
}

.product-thumbnail img {
  max-height: 50px !important;
}

.widget_playstore li {
  list-style: none;
  margin: 0;
  position: relative;
}

.widget_playstore li img {
  max-width: 150px;
  height: auto;
  display: block;
}

/* Keep footer content aligned without constraining the logo's wrapper height. */
.shop-footer-row {
  align-items: flex-start;
  row-gap: 32px;
}

.footer_top .widget {
  margin-bottom: 0;
}

.footer_top .widget_title {
  margin-top: 0;
  margin-bottom: 20px;
}

.footer-brand .footer_logo {
  margin-bottom: 16px;
}

.footer-brand .footer_logo a {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.footer-brand .footer_logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80px;
  margin: 0;
  object-fit: contain;
}

.footer-description {
  max-width: 320px;
  overflow-wrap: anywhere;
}

.footer_top .contact_info > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer_top .contact_info li i {
  flex: 0 0 18px;
  margin: 4px 0 0;
}

.footer_top .contact_info i + * {
  min-width: 0;
  max-width: none;
  overflow-wrap: anywhere;
}

.widget_playstore {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.qty_in_cart {
  /* border: 0.1px solid #126df562; */
  width: 30%;
  margin-top: 10px;
  text-align: left;
  /* background-color: #126df562; */
  border-radius: 2px;
  text-decoration: underline;
}

.qty_in_cart > p {
  padding: 2px;
  margin-bottom: 5px;
  margin: 0px;
  width: 100%;
  color: rgb(0, 0, 0);
}

.qty_in_cart > span {
  font-weight: 600;
}

.qty_in_cart_list > p {
  margin-bottom: 0px;
  font-size: 12px;
  text-align: center;
  color: black;
}

.cart-product-quantity.disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.offer-icon {
  --offer-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E");
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background-color: var(--main);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.offer-icon::before {
  content: "";
  width: 13px;
  height: 13px;
  background-color: #fff;
  -webkit-mask: var(--offer-tag) center / contain no-repeat;
  mask: var(--offer-tag) center / contain no-repeat;
}
.offer-icon i {
  display: none;
}

/* List view: pin the promo tag to the top-right of the whole card, not the image */
.shop_container.list .offer-icon {
  top: 10px;
  right: 10px;
  left: auto;
}
.shop_container.list .product:has(.offer-icon) .product_title {
  padding-right: 36px;
}

/* Ensure preloader is a smooth overlay properly layered above product cards without conflicting with header/modals */
.loading_pr,
.shop_container .loading_pr {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 180px;
  pointer-events: all;
  border-radius: 8px;
}

/* Product-list loader: clean centered circular spinner */
.loading_pr .mfp-preloader {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: auto !important;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  text-indent: -9999px;
  box-sizing: border-box;
  overflow: hidden;
}
.loading_pr .mfp-preloader::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 3px solid #e5e7eb;
  border-top-color: var(--main, #ff324d);
  animation: shop-pr-spin 0.65s linear infinite;
}
@keyframes shop-pr-spin {
  to {
    transform: rotate(360deg);
  }
}

.navbar-brand img {
  max-height: 80px;
}

.main_content .product-description p {
  margin-bottom: 0px !important;
}
:root {
  --header-top-offset: -115px;
  --header-bottom-height: 54px;
  --breadcrumb-height: 0px;
  --sticky-header-total: 54px;
}

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

@media (max-width: 1024px) {
  :root {
    --header-top-offset: -62px;
    --header-bottom-height: 40px;
    --breadcrumb-height: 0px;
    --sticky-header-total: 40px;
  }
}

.header_wrap {
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-top-offset, -115px);
  z-index: 998;
  background: #ffffff;
  overflow: visible;
}

.breadcrumb_section {
  position: static;
  background-color: #f7f8fb;
  border-bottom: 1px solid #e9ecef;
}

.product_search_form.radius_input {
  /*! border-radius: 30px; */
  border: none;
  overflow: visible;
}

.product_search_form.radius_input .input-group {
  overflow: hidden;
  border-radius: 12px;
}

.product_search_form.radius_input select {
  border-radius: 30px 0 0 30px;
}

.product_search_form.radius_input input {
  border-radius: 12px !important;
  background: #f9f9f9;
  height: 50px;
  font-size: 14px;
}

/* Home slider: centered CTA + reliable indicator hits */
.banner_section,
.banner_section.slide_medium,
.banner_section:not(.full_screen),
.banner_section:not(.full_screen) .banner_content_wrap,
.shop_banner_slider,
.shop_banner_slider .carousel,
.shop_banner_slider .carousel-inner {
  height: auto !important;
  min-height: 0 !important;
}

.banner_section,
.banner_section.slide_medium,
.shop_banner_slider {
  margin-top: 14px !important;
  margin-bottom: 8px !important;
}

.banner_section.slide_medium .carousel-item,
.banner_section:not(.full_screen) .carousel-item,
.banner_section .carousel-item,
.shop_banner_slider .carousel-item {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3.1 / 1 !important;
  max-height: 480px !important;
  width: 100% !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.banner_section.slide_medium .carousel-item,
.banner_section.slide_medium .banner_content_wrap,
.banner_section.slide_medium .banner_content_wrap .carousel-item,
.banner_section.shop_el_slider,
.banner_section.shop_el_slider .carousel-item,
.banner_section.shop_el_slider .banner_content_wrap,
.banner_section.shop_el_slider .banner_content_wrap .carousel-item {
  margin-top: 0 !important;
}

.shop_banner_slider .carousel,
.shop_banner_slider .carousel-inner,
.shop_banner_slider .carousel-item {
  border-radius: 6px !important;
  overflow: hidden !important;
}

.shop_banner_slider .shop_slider_picture,
.shop_banner_slider .shop_slider_image {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.shop_banner_slider .shop_slider_picture {
  z-index: 0;
}

.shop_banner_slider .shop_slider_image {
  object-fit: contain;
  object-position: center;
  z-index: 0 !important;
}

.shop_banner_slider .banner_slide_link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Mobile slider responsiveness: preserve natural banner ratio without empty white letterboxes */
@media (max-width: 768px) {
  .banner_section,
  .banner_section.slide_medium,
  .shop_banner_slider {
    margin-top: 8px !important;
    margin-bottom: 6px !important;
  }

  .shop_banner_slider .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .banner_section.slide_medium .carousel-item,
  .banner_section:not(.full_screen) .carousel-item,
  .banner_section .carousel-item,
  .shop_banner_slider .carousel-item {
    aspect-ratio: 3.1 / 1 !important;
    max-height: 280px !important;
    background-size: contain !important;
    background-position: center center !important;
  }
}

.shop_banner_slider .banner_slide_content {
  top: auto;
  bottom: 56px;
  left: 0;
  right: 0;
  transform: none;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.shop_banner_slider .banner_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
}

.shop_banner_slider .banner_content h5 {
  margin-bottom: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.shop_banner_slider .banner_content .btn,
.shop_banner_slider .banner_content a {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

/* Indicators: positioned outside below the slider image with proper spacing */
.shop_banner_slider .carousel-indicators {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 5 !important;
  list-style: none !important;
}

.shop_banner_slider .carousel-indicators [data-bs-target],
.shop_banner_slider .carousel-indicators button {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: 9px !important;
  height: 9px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 9999px !important;
  background-color: #cbd5e1 !important;
  opacity: 0.8 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  text-indent: 0 !important;
}

.shop_banner_slider .carousel-indicators [data-bs-target]::before,
.shop_banner_slider .carousel-indicators [data-bs-target]::after,
.shop_banner_slider .carousel-indicators button::before,
.shop_banner_slider .carousel-indicators button::after {
  display: none !important;
  content: none !important;
}

.shop_banner_slider .carousel-indicators [data-bs-target]:hover,
.shop_banner_slider .carousel-indicators button:hover {
  background-color: #94a3b8 !important;
  opacity: 1 !important;
}

.shop_banner_slider .carousel-indicators [data-bs-target].active,
.shop_banner_slider .carousel-indicators button.active {
  width: 26px !important;
  height: 9px !important;
  border-radius: 9999px !important;
  background-color: var(--main, #634099) !important;
  opacity: 1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Prev / Next controls: floating circular buttons */
.shop_banner_slider .carousel-control-prev,
.shop_banner_slider .carousel-control-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  color: #1f2937 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  opacity: 0 !important;
  transition: all 0.25s ease !important;
  z-index: 10 !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.shop_banner_slider .carousel:hover .carousel-control-prev,
.shop_banner_slider .carousel:hover .carousel-control-next {
  opacity: 0.9 !important;
}

.shop_banner_slider .carousel-control-prev {
  left: 18px !important;
  right: auto !important;
}

.shop_banner_slider .carousel-control-next {
  right: 18px !important;
  left: auto !important;
}

.shop_banner_slider .carousel-control-prev:hover,
.shop_banner_slider .carousel-control-next:hover {
  opacity: 1 !important;
  background-color: var(--main, #634099) !important;
  color: #ffffff !important;
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
}

@media (max-width: 768px) {
  .shop_banner_slider .carousel-control-prev,
  .shop_banner_slider .carousel-control-next {
    display: none !important;
  }
}

/* ==========================================================================
   Promotional Banners (Single Banners / 2-Column Banner Grid)
   Enforce aspect-ratio, max-height and object-fit: cover so non-standard,
   vertical, or oversized images never break the banner grid layout.
   ========================================================================== */
.single_banner,
.single_banner_wrap,
.sale_banner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  aspect-ratio: 2.3 / 1 !important;
  max-height: 260px !important;
  margin-bottom: 24px !important;
  border-radius: 8px !important;
  background-color: #f8fafc !important;
}

.single_banner_wrap {
  text-decoration: none !important;
  color: inherit !important;
}

.single_banner_wrap .single_banner {
  margin-bottom: 0 !important;
  height: 100% !important;
}

.single_banner img,
.single_banner_wrap img,
.sale_banner img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  transition: transform 0.35s ease-in-out !important;
}

.single_banner:hover img,
.single_banner_wrap:hover img,
.sale_banner:hover img {
  transform: scale(1.05) !important;
}

.single_banner_info {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 50% !important;
  padding: 16px 20px !important;
  z-index: 2 !important;
}

@media (max-width: 768px) {
  .single_banner,
  .single_banner_wrap,
  .sale_banner {
    aspect-ratio: 2.2 / 1 !important;
    max-height: 220px !important;
    margin-bottom: 16px !important;
  }
}

/* ==========================================================================
   Sticky footer & layout structure
   The off-canvas mobile menu is position:fixed and parked at right:-340px, so
   it sticks out past the right edge of the viewport and creates a page-level
   horizontal scrollbar. Because it is fixed, only clipping at the viewport
   (html/body) removes the stray scroll — an ancestor's overflow can't clip it.
   `clip` (not `hidden`) because hidden turns body into a scroll container,
   which silently kills every position:sticky descendant (cart order summary);
   clip clips without doing that. hidden stays as an old-browser fallback.

   Flexbox sticky footer ensures the footer always pins to the bottom of the
   viewport on short pages (e.g. empty cart, checkout, login, error pages)
   without leaving blank white space underneath.
   ========================================================================== */
html {
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-x: clip;
}

/* ==========================================================================
   Global Slim Scrollbars & Gutter Scroll (Site-wide)
   ========================================================================== */
html {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  scrollbar-gutter: stable;
}

*,
*::before,
*::after {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent;
}

header.header_wrap,
.breadcrumb_section {
  flex-shrink: 0;
}

.main_content,
.main_content.cart-page,
.section.cart-section,
main {
  flex: 1 0 auto;
}

footer,
footer.footer_dark,
.footer_dark {
  margin-top: auto !important;
  flex-shrink: 0;
  width: 100%;
}

/* ==========================================================================
   Product detail page — keep the quantity stepper and the Add-to-cart button
   side by side at every screen width (responsive.css forces .cart_extra back
   to display:block on small screens, which stacks them).
   ========================================================================== */
.cart_extra {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
}

.cart_extra .cart-product-quantity {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.cart_extra .cart_btn {
  margin: 0;
  flex: 0 0 auto;
}

/* ==========================================================================
   Qty-in-cart indicator — understated "N in cart" cart-tag metadata.
   Appended last so source order supersedes the legacy .qty_in_cart_list > p
   rules earlier in this file. No icon font is used (that is exactly why the
   fa-tag offer glyph failed): the little cart is an inline-SVG CSS mask tinted
   with the brand colour, so it can never render an empty box. The COUNT is the
   only element carrying brand emphasis; the label stays muted so the badge
   reads as quiet metadata and never competes with the Add-to-cart button.
   ========================================================================== */
.qty_in_cart_list {
  --qic-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7%2018c-1.1%200-1.99.9-1.99%202S5.9%2022%207%2022s2-.9%202-2-.9-2-2-2zM1%202v2h2l3.6%207.59-1.35%202.45c-.16.28-.25.61-.25.96%200%201.1.9%202%202%202h12v-2H7.42c-.14%200-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75%200%201.41-.41%201.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48%200-.55-.45-1-1-1H5.21l-.94-2H1zm16%2016c-1.1%200-1.99.9-1.99%202s.89%202%201.99%202%202-.9%202-2-.9-2-2-2z'/%3E%3C/svg%3E");
  margin: 6px 0 0;
  padding: 0;
  line-height: 1;
}

.qty_in_cart_list > p {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: left;
  color: #6b7280;
  white-space: nowrap;
}

.qty_in_cart_list > p::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background-color: transparent; /* invisible if mask unsupported — never a solid square */
}

@supports ((-webkit-mask: url("")) or (mask: url(""))) {
  .qty_in_cart_list > p::before {
    background-color: var(--main);
    background-color: color-mix(in srgb, var(--main) 85%, #1f2937);
    -webkit-mask: var(--qic-icon) center / contain no-repeat;
    mask: var(--qic-icon) center / contain no-repeat;
  }
}

.qty_in_cart_list > p > b {
  font-weight: 700;
  color: var(--main);
  color: color-mix(in srgb, var(--main) 88%, #0b1324);
}

/* GRID in-cart chip — on the image top-left. List keeps it in the price row. */
.shop_container:not(.list) .qty_in_cart_list {
  position: absolute !important;
  top: calc(10px + var(--promo-ribbon-h, 0px)) !important;
  left: 10px !important;
  z-index: 5 !important;
  order: 0 !important;
  flex: none !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.shop_container.list .qty_in_cart_list.is-empty,
.shop_container.list .product_info .qty_in_cart_list.is-empty,
.shop_container:not(.list) .qty_in_cart_list.is-empty {
  display: none !important;
  visibility: visible !important;
}
.shop_container:not(.list) .qty_in_cart_list > p {
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid color-mix(in srgb, var(--main) 22%, #e5e7eb);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  font-size: 11px;
  gap: 4px;
  text-align: left;
  white-space: nowrap;
}
.shop_container:not(.list) .qty_in_cart_list > p::before {
  width: 12px;
  height: 12px;
}
.shop_container.list .product_info .product_title {
  min-width: 0;
}

/* ==========================================================================
   Full product name on hover — the card titles clamp to 2 lines with
   overflow:hidden, which would clip any CSS tooltip, so we use the native
   browser title tooltip (set lazily in scripts.js only when truncated).
   These rules are just the affordance + keyboard-focus parity.
   ========================================================================== */
.product_title a,
.product_title a:visited {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.product_title a:hover {
  color: var(--main);
  text-decoration: none;
}
.product_title a:focus-visible {
  outline: 2px solid var(--main);
  outline: 2px solid color-mix(in srgb, var(--main) 60%, transparent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==========================================================================
   GRID card polish
   - Center the price and quantity so the price/qty/Add-to-cart read as one
     balanced "buy zone" under the name.
   - Move the in-cart indicator OUT of the flow and onto the product image as a
     small floating chip, so every card body stays the same height (an in-flow
     "N in cart" line is what made some cards taller and misaligned the row).
   ========================================================================== */
.shop_container:not(.list) .product {
  position: relative; /* positioning context for the in-cart chip */
  height: 100% !important;
}

.shop_container:not(.list) .product_info {
  flex: 1 1 auto;
}

/* reserve exactly two lines for the name so the price + qty + Add-to-cart line
   up across every card in the row, regardless of 1- vs 2-line names */
.shop_container:not(.list) .product .product_title {
  min-height: 2.7em !important; /* 2 lines × 1.35 line-height */
}

/* Reserve the promo row so cards without a badge still align with those that have one */
.shop_container:not(.list) .promo-flag,
.shop_container:not(.list) .promo-flag-slot {
  min-height: 28px;
}
.shop_container:not(.list) .promo-flag-slot {
  display: block;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}
.shop_container.list .promo-flag-slot {
  display: none !important;
}

.shop_container:not(.list) .product_price_qty,
.product_price_qty {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  margin-top: auto;
  margin-bottom: 2px;
  flex-wrap: wrap;
}

.shop_container:not(.list) .product_info .product_price,
.shop_container:not(.list) .product_price_qty .product_price,
.product_price_qty .product_price {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: fit-content;
  width: auto;
  text-align: left !important;
  margin: 0;
}

.shop_container:not(.list) .product_info .product_price .price,
.shop_container:not(.list) .product_price_qty .product_price .price,
.product_price_qty .product_price .price {
  display: inline-block;
  width: auto;
  text-align: left !important;
  font-size: 15px;
  font-weight: 700;
  color: var(--main, #1e3a8a);
  white-space: nowrap;
}

.shop_container:not(.list) .product_info .cart-product-quantity,
.shop_container:not(.list) .product_price_qty .cart-product-quantity,
.product_price_qty .cart-product-quantity {
  width: auto !important;
  margin: 0 !important;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.shop_container:not(.list) .product_info .quantity,
.shop_container:not(.list) .product_price_qty .quantity,
.product_price_qty .quantity {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  flex-shrink: 0;
}

.shop_container:not(.list) .product_info > .add-to-cart {
  margin-top: 0;
}

@media (max-width: 767.98px) {
  .shop_container:not(.list) .product_price_qty,
  .shop_container.grid .product_price_qty,
  .product_price_qty {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 8px;
    width: 100%;
  }

  .shop_container:not(.list) .product_info .product_price,
  .shop_container:not(.list) .product_price_qty .product_price,
  .shop_container.grid .product_info .product_price,
  .shop_container.grid .product_price_qty .product_price,
  .product_price_qty .product_price {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto;
  }

  .shop_container:not(.list) .product_info .product_price .price,
  .shop_container:not(.list) .product_price_qty .product_price .price,
  .shop_container.grid .product_info .product_price .price,
  .shop_container.grid .product_price_qty .product_price .price,
  .product_price_qty .product_price .price {
    text-align: center !important;
    display: inline-block;
    width: auto;
  }

  .shop_container:not(.list) .product_info .cart-product-quantity,
  .shop_container:not(.list) .product_price_qty .cart-product-quantity,
  .shop_container.grid .product_info .cart-product-quantity,
  .shop_container.grid .product_price_qty .cart-product-quantity,
  .product_price_qty .cart-product-quantity {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .shop_container:not(.list) .product_info .quantity,
  .shop_container:not(.list) .product_price_qty .quantity,
  .shop_container.grid .product_info .quantity,
  .shop_container.grid .product_price_qty .quantity,
  .product_price_qty .quantity {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .shop_container:not(.list) .product_info .quantity .minus,
  .shop_container:not(.list) .product_info .quantity .plus,
  .shop_container:not(.list) .product_price_qty .quantity .minus,
  .shop_container:not(.list) .product_price_qty .quantity .plus,
  .product_price_qty .quantity .minus,
  .product_price_qty .quantity .plus {
    flex: 0 0 32px;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }

  .shop_container:not(.list) .product_info .quantity .qty,
  .shop_container:not(.list) .product_price_qty .quantity .qty,
  .product_price_qty .quantity .qty {
    flex: 0 0 42px;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 32px !important;
    margin: 0 4px !important;
    text-align: center !important;
  }
}

/* =====================================================================
   DESKTOP (>= 1025px) UI ISOLATION
   Strictly hides mobile drawer elements, mobile search triggers, back arrows,
   and mobile filters on all desktop viewports (1025px and up).
   ===================================================================== */
@media (min-width: 1025px) {
  .top-header {
    display: block !important;
  }
  .drawer-label,
  .drawer-only-item,
  .mmenu-auth-line,
  .mobile_search_close,
  .search-leading-icon,
  .mobile_search_trigger,
  .mobile-account-link,
  .btn-mobile-filter,
  .mobile-filters-backdrop,
  .mobile-filter-close-btn,
  .quick-order-modal-trigger-box {
    display: none !important;
  }
  .search_btn3 {
    display: flex !important;
  }
  .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li.drawer-only-item,
  .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li.drawer-label,
  .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li.logout-btn {
    display: none !important;
  }
}

/* =====================================================================
   MOBILE SHOP HEADER (<=1024px). Desktop (>=1025px) untouched.
   Selectors are intentionally (0,3,x)+ because custom.css loads BEFORE the
   header.php/head.php inline <style>, so we out-specify rather than rely on
   source order. No !important, so future overrides stay possible.
   ===================================================================== */
@media (max-width: 1024px) {
  .top-header {
    display: none !important;
  }
  .mobile_search_trigger,
  .mobile-account-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .search_btn3 {
    display: none !important;
  }
  .btn-mobile-filter {
    display: inline-flex !important;
  }
  .drawer-only-item,
  .drawer-label {
    display: block !important;
  }
  .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li.drawer-only-item,
  .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li.drawer-label,
  .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li.logout-btn {
    display: block !important;
  }
  /* ---------- BAR 1 : middle-header = clean product bar ---------- */
  .header_wrap .middle-header {
    background: #fff;
    border-bottom: 1px solid #eef0f2;
  }

  .header_wrap .middle-header .nav_block {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 62px;
    padding: 6px 0;
  }

  /* Logo: (0,3,1) beats the buggy 120px cap and the 768px 50px cap */
  .header_wrap .middle-header .navbar-brand {
    flex: 0 1 auto;
    width: auto;
    max-width: 60%;
    margin: 0;
    padding: 0;
  }
  .header_wrap .middle-header .navbar-brand img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 80px;
    min-height: 22px;
    object-fit: contain;
  }
  .header_wrap .middle-header .navbar-brand .brand_text_fallback {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    line-height: 40px;
    color: #1f2937;
    white-space: nowrap;
  }

  .header_wrap .middle-header .product_search_form {
    flex: 1 1 auto;
    max-width: 420px;
    margin: 0 8px;
  }

  /* Search + cart cluster: static (was absolute), right-aligned, 44px targets */
  .header_wrap .middle-header .attr-nav {
    position: static;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
  }
  .header_wrap .middle-header .attr-nav > li {
    float: none;
  }
  .header_wrap .middle-header .attr-nav .nav-link,
  .header_wrap
    .middle-header
    .attr-nav
    li.cart_dropdown
    .nav-link.cart_trigger {
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #1f2937;
  }
  .header_wrap .middle-header .attr-nav .mobile_search_trigger i,
  .header_wrap .middle-header .attr-nav .cart_icon_wrap i {
    font-size: 20px;
  }
  /* Guest account/login icon, sized to match the search + cart icon cluster. */
  .header_wrap .middle-header .attr-nav .nav-link.mobile-account-link i {
    font-size: 20px;
    color: #1f2937;
    margin: 0;
  }
  .header_wrap .middle-header .attr-nav .cart-amount {
    font-size: 13px;
    font-weight: 600;
  }
  .header_wrap .middle-header .attr-nav li.cart_dropdown .cart_icon_wrap {
    line-height: 1;
  }
  .header_wrap .middle-header .attr-nav li.cart_dropdown .cart_count {
    top: -6px;
    left: auto;
    right: -8px;
  }

  /* ---------- BAR 2 : bottom_header = slim brand-blue utility bar ---------- */
  .header_wrap .bottom_header {
    background: var(--main);
    margin-bottom: 0 !important;
  }
  .header_wrap .bottom_header .row {
    align-items: center;
    margin: 0;
  }
  .header_wrap .bottom_header .navbar {
    padding: 0;
    align-items: center;
  }

  /* Menu + Categories : clean transparent header items matching reference design */
  .header_wrap .categories_btn,
  .header_wrap .side_navbar_toggler {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }
  .header_wrap .side_navbar_toggler {
    width: auto !important;
    min-width: 0 !important;
    font-size: 20px !important;
    padding: 0 4px !important;
  }
  .header_wrap .categories_btn i,
  .header_wrap .side_navbar_toggler .ion-android-menu {
    font-size: 27px !important;
    margin: 0 !important;
  }
  .header_wrap .categories_btn span {
    display: inline !important;
    margin: 0 !important;
  }

  /* Phone -> tap-to-call, right aligned; transparent background & centered icon */
  .header_wrap .bottom_header .contact_phone {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    margin-left: auto !important;
    margin-right: 16px !important;
    padding: 0 !important;
  }
  .header_wrap .bottom_header .contact_phone a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    gap: 8px !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }
  .header_wrap .bottom_header .contact_phone a i,
  .header_wrap .bottom_header .contact_phone a span {
    color: inherit !important;
  }
  .header_wrap .bottom_header .contact_phone i {
    font-size: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .header_wrap .bottom_header .contact_phone i::before {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
  }
  .header_wrap .bottom_header .contact_phone:empty {
    display: none !important;
  }

  /* ---------- Category offcanvas drawer (#navCatContent) ----------
     Fixed 100vh viewport drawer with touch scrolling on mobile */
  #navCatContent {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -340px;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 88vw !important;
    max-width: 340px !important;
    min-width: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15) !important;
    padding: 12px 10px 18px;
    transition: left 0.25s ease-in-out !important;
  }
  #navCatContent.show {
    left: 0 !important;
  }

  /* ---------- Account / site drawer (#navbarSidetoggle) ----------
     Light theme offcanvas menu with highest z-index so product zoom icon doesn't overlap */
  .header_wrap .navbar-collapse.mobile_side_menu {
    background-color: #ffffff !important;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15) !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .header_wrap .mobile_side_menu .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #ffffff !important;
  }
  .header_wrap .mobile_side_menu .navbar-nav > li {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    float: none !important;
  }
  .header_wrap .mobile_side_menu .navbar-nav > li > .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    color: #2d3748 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-decoration: none !important;
  }
  .header_wrap .mobile_side_menu .navbar-nav > li > .nav-link:hover {
    color: var(--main) !important;
    background: #f8fafc !important;
  }
  .header_wrap .mobile_side_menu .navbar-nav i {
    width: 20px !important;
    text-align: center !important;
    color: var(--main) !important;
    font-size: 16px !important;
  }
  .header_wrap .mobile_side_menu .logout-btn > .nav-link,
  .header_wrap .mobile_side_menu .logout-btn > .nav-link i {
    color: #ef4444 !important;
  }
  .header_wrap .mobile_side_menu .drawer-label {
    padding: 14px 18px 6px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
  }

  /* overflow guard */
  .header_wrap,
  .header_wrap .container {
    max-width: 100%;
  }
}

/* Ensure product detail page image zoom elements remain behind full-screen mobile menu drawer */
.product_img_zoom,
.zoomContainer {
  z-index: 9 !important;
}

/* Hide sticky checkout bar when mobile menu drawer, search overlay, or modal is open */
body.mmenu-open .m-cart-sticky,
body.mobile-search-active .m-cart-sticky,
body:has(.product_search_form.show) .m-cart-sticky,
body.filters-modal-locked .m-cart-sticky,
body.modal-open .m-cart-sticky,
body.offcanvas-open .m-cart-sticky {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Prevent double scrollbar when mobile search overlay is active */
html.mobile-search-active,
html:has(body.mobile-search-active),
body.mobile-search-active,
body:has(.product_search_form.show) {
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100% !important;
}

@media (max-width: 575px) {
  .header_wrap .middle-header .attr-nav .cart-amount {
    display: none;
  }
  .header_wrap .middle-header .navbar-brand img {
    max-height: 60px;
  }
}

/* Blue utility bar layout fix: the "All Categories" pill overflows its narrow
   Bootstrap col-3 and collides with the phone in the col-9. Lay the row out as
   flex so Categories sizes to its content on the left, and the phone + Menu are
   pushed to the right — no overlap, no wrapping. */
@media (max-width: 1024px) {
  .header_wrap .bottom_header .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 52px !important;
  }
  .header_wrap .bottom_header .row > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .header_wrap .bottom_header .row > [class*="col-"]:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  .header_wrap .bottom_header .row > [class*="col-"]:last-child {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  .header_wrap .bottom_header .row > [class*="col-"]:last-child .navbar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .header_wrap .bottom_header .contact_phone {
    order: 1 !important;
    margin-left: auto !important;
  }
  .header_wrap .bottom_header .side_navbar_toggler {
    order: 2 !important;
    margin-left: 8px !important;
    flex: 0 0 auto !important;
  }
}

/* Very small phones: phone becomes an icon-only tap-to-call so the two pills fit */
@media (max-width: 575px) {
  .header_wrap .bottom_header .contact_phone a span {
    display: none !important;
  }
  .header_wrap .bottom_header .contact_phone {
    padding-left: 0 !important;
  }
}
/* ============================================================
   Promotions display (promotions-module offers on the shop)
   ============================================================ */

/* Grid promo: in-flow pill below the product name (same as list) */
.shop_container:not(.list) .promo-flag {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 3px 9px;
  background: #f3f4f6;
  color: var(--main);
  border: 1px solid #e5e7eb;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  border-radius: 6px;
  overflow: hidden;
  box-sizing: border-box;
}
.shop_container:not(.list) .promo-flag::before {
  display: none;
}
.shop_container:not(.list) .promo-flag span {
  color: var(--main);
}
.shop_container:not(.list) .product:has(.promo-flag),
.shop_container:not(.list) .product_wrap:has(.promo-flag) {
  --promo-ribbon-h: 0px;
  padding-top: 0;
  overflow: hidden;
}
.promo-flag i {
  display: none !important;
}
.promo-flag span {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-weight:500;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  color: inherit;
  /* font: inherit; */
}
.shop_container:not(.list) .product:has(.promo-flag) .pr_flash,
.shop_container.list .product:has(.promo-flag) .pr_flash {
  display: none;
}

/* Promotion cards strip on the Promotions page */
.promo-strip {
  margin-bottom: 24px;
}
.promo-strip-empty {
  padding: 24px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  text-align: center;
}

/* ==========================================================================
   Product Detail Page (PDP) Redesign
   ========================================================================== */

/* Left Column Image Showcase & Floating Zoom */
.product_img_box {
  position: relative;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}
.product_img_box #product_img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.product_img_box .product_img_zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  z-index: 2;
}
.product_img_box .product_img_zoom:hover {
  background: #fff;
  color: var(--main, #1e3a8a);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: scale(1.06);
}

/* Gallery slider item borders */
.product_gallery_item .item {
  padding: 4px;
}
.product_gallery_item .item a {
  display: block;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.product_gallery_item .item a:hover,
.product_gallery_item .item a.active {
  border-color: var(--main, #1e3a8a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.product_gallery_item .item img {
  width: 100%;
  height: 64px;
  object-fit: contain;
}

/* Right Column Product Card Details */
.pdp-card-detail {
  padding: 0 4px;
}
.pdp-card-detail .product_title {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.pdp-second-name {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 12px;
}
.pdp-brand-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 2px 0 12px;
  font-size: 14px;
}
.pdp-brand-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
}
.pdp-brand-label::after {
  content: ":";
}
.pdp-brand-name {
  font-weight: 700;
  color: #1e293b;
}
a.pdp-brand-name {
  color: var(--main, #1e3a8a);
  text-decoration: none;
}
a.pdp-brand-name:hover {
  text-decoration: underline;
  color: #1d4ed8;
}
.pdp-brand-all {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--main, #1e3a8a);
  text-decoration: none;
  padding-left: 12px;
  border-left: 1px solid #cbd5e1;
}
.pdp-brand-all:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

/* Pricing Row & In-Cart Status Badge */
.pdp-pricing-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px 18px;
  margin-bottom: 18px;
  margin-top: 12px;
}
.pdp-card-detail .product_price {
  margin-bottom: 0 !important;
  justify-content: flex-start !important;
  display: inline-flex !important;
  float: none !important;
}
.pdp-price-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--main, #1e3a8a);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pdp-in-cart {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border: 1px solid color-mix(in srgb, var(--main) 22%, #e5e7eb);
  border-radius: 9999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}
.pdp-in-cart-icon {
  font-size: 11px;
  color: var(--main);
  color: color-mix(in srgb, var(--main) 85%, #1f2937);
}
.pdp-in-cart-text {
  color: #6b7280;
  white-space: nowrap;
}
.pdp-in-cart-text b {
  font-weight: 700;
  color: var(--main);
  color: color-mix(in srgb, var(--main) 88%, #0b1324);
}

/* PDP Cart Controls */
.pdp-card-detail .cart_extra {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 14px;
  margin-bottom: 22px;
  margin-top: 6px;
}
.pdp-card-detail .cart_extra .cart-product-quantity {
  margin: 0;
  flex: 0 0 auto;
}
.pdp-card-detail .cart_extra .cart_btn {
  margin: 0;
  flex: 0 0 auto;
}

/* ==========================================================================
   PDP Variations / Connected Products (Modern Unified Stepper & Action Toolbar)
   ========================================================================== */
.connected-products {
  margin-top: 16px;
  margin-bottom: 24px;
}

.cp-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
}

.cp-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.cp-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
  color: #0f172a;
}

.cp-header-main {
  letter-spacing: 0.1px;
}

.cp-var-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
}

.cp-header-hint {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.cp-table-wrap {
  max-height: 520px;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
}

.cp-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.cp-table-wrap::-webkit-scrollbar-track {
  background: #f8fafc;
}

.cp-table-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.cp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}

.cp-table thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  text-align: left;
  padding: 8px 14px;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 2;
}

.cp-table thead th.cp-col-qty {
  text-align: center;
}

.cp-table tbody td {
  padding: 7px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  transition: background 0.15s ease;
}

.cp-table tbody tr:last-child td {
  border-bottom: none;
}

.cp-table tbody tr:hover td {
  background: #f8fafc;
}

.cp-table tbody tr.cp-current td {
  background: #eff6ff;
}

.cp-table tbody tr.cp-current td:first-child {
  border-left: 3.5px solid var(--main, #126bf5);
}

.cp-table tbody tr.cp-row-has-qty td {
  background: #fcfdfe;
}

.cp-name-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.15s ease;
}

.cp-name:hover {
  color: var(--main, #126bf5);
  text-decoration: none;
}

.cp-viewing {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--main, #126bf5);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: middle;
  line-height: 1.4;
}

.cp-upc {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

/* Logged-in rows are already stepper-tall: UPC on its own line keeps row heights even. */
.cp-table-buyer .cp-upc {
  flex: 0 0 100%;
}

.cp-upc-label {
  font-weight: 500;
}

.cp-col-price {
  width: 100px;
  white-space: nowrap;
}

.cp-price-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cp-price {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.cp-badge-oos {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #fee2e2;
  color: #dc2626;
  font-weight: 600;
}

.cp-badge-incart {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #dcfce7;
  color: #15803d;
  font-weight: 600;
}

.cp-col-qty {
  width: 120px;
  text-align: center;
}

.cp-col-qty .cart-product-quantity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.cp-col-qty .quantity {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cp-col-qty .quantity .minus,
.cp-col-qty .quantity .plus,
.cp-col-qty .quantity .cp-minus,
.cp-col-qty .quantity .cp-plus {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.cp-col-qty .quantity .minus:hover,
.cp-col-qty .quantity .plus:hover,
.cp-col-qty .quantity .cp-minus:hover,
.cp-col-qty .quantity .cp-plus:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.cp-col-qty .quantity .minus:active,
.cp-col-qty .quantity .plus:active,
.cp-col-qty .quantity .cp-minus:active,
.cp-col-qty .quantity .cp-plus:active {
  background: #e2e8f0 !important;
  transform: scale(0.95) !important;
}

.cp-col-qty .quantity .qty,
.cp-col-qty .quantity .cp-qty-input {
  width: 40px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  text-align: center !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.cp-col-qty .quantity .qty:focus,
.cp-col-qty .quantity .cp-qty-input:focus {
  border-color: var(--main, #126bf5) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(18, 107, 245, 0.15) !important;
}

/* Actions Toolbar at bottom of Variations Card */
.cp-actions-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.04);
}

.cp-actions-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cp-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #eff6ff;
  color: var(--main, #126bf5);
  font-size: 15px;
  flex-shrink: 0;
}

.cp-summary-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cp-summary-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.cp-summary-text {
  font-size: 12px;
  color: #64748b;
  margin-top: 1px;
}

.cp-actions-btn-wrap {
  flex-shrink: 0;
}

.cp-btn-addtocart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.cp-btn-addtocart.cp-btn-highlight {
  animation: cpPulse 2s infinite;
}

@keyframes cpPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(18, 107, 245, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(18, 107, 245, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(18, 107, 245, 0);
  }
}

@media (max-width: 575.98px) {
  .cp-actions-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px;
  }
  .cp-btn-addtocart {
    width: 100% !important;
  }
  .cp-actions-summary {
    justify-content: center;
    text-align: center;
  }
}

/* Product Specifications 2-Column Grid */
.pdp-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.pdp-spec-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.pdp-spec-item-full {
  grid-column: 1 / -1;
  border-top: 1px dashed #e2e8f0;
  padding-top: 8px;
  margin-top: 2px;
}
.pdp-spec-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  min-width: 95px;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.pdp-spec-label::after {
  content: ":";
}
.pdp-spec-value {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  word-break: break-word;
}
.pdp-spec-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.pdp-spec-link {
  color: var(--main, #1e3a8a);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.15s ease;
}
.pdp-spec-link:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

/* Promotions box on the product detail page */
.pdp-promotions {
  margin: 14px 0 16px;
  background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
  border: 1px solid #e0e7ff;
  border-left: 4px solid var(--main, #4f46e5);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.05);
}
.pdp-promotions-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--main, #4f46e5);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pdp-promo-item + .pdp-promo-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #cbd5e1;
}
.pdp-promo-item .pdp-promo-text {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}
.pdp-promo-item .pdp-promo-name {
  font-size: 12.5px;
  font-weight: 500;
  color: #475569;
  margin-top: 2px;
}
.pdp-promo-item .pdp-promo-dates {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-top: 4px;
}
.pdp-promo-item .pdp-promo-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--main, #4f46e5);
  text-decoration: none;
  transition: all 0.2s ease;
}
.pdp-promo-item .pdp-promo-link:hover {
  color: #3730a3;
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .pdp-spec-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 991.98px) {
  .product-image {
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
  }
  .pdp-card-detail {
    padding: 0;
  }
  .pdp-card-detail .product_title {
    font-size: 22px;
  }
}

@media (max-width: 576px) {
  .pdp-card-detail .product_title {
    font-size: 20px;
  }
  .pdp-price-value {
    font-size: 22px;
  }
}

/* SweetAlert2 Modal Button & Loader Alignment */
.swal2-modal .swal2-styled {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  margin: 5px 8px !important;
}

.swal2-modal .swal2-styled + .swal2-styled {
  margin-top: 5px !important;
}

.swal2-modal .swal2-styled.swal2-loading {
  width: 40px !important;
  height: 40px !important;
  margin: 5px 15px !important;
  vertical-align: middle !important;
}

/* Sticky Checkout Totals Side Panel */
@media (min-width: 768px) {
  .order_review {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(var(--sticky-header-total, 134px) + 20px) !important;
    align-self: start;
    z-index: 10;
  }

  /* Cart page sticky totals side panel */
  .cart-side {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(var(--sticky-header-total, 134px) + 20px) !important;
    align-self: start;
    z-index: 20;
  }

  /* Quick Order sticky search and item list sidebar */
  .quick-order-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(var(--sticky-header-total, 134px) + 20px) !important;
    align-self: flex-start;
    z-index: 20;
    max-height: calc(
      100vh - var(--sticky-header-total, 134px) - 30px
    ) !important;
  }
}

/* Sticky product filters (sort + grid/list) and left Brands/Categories sidebar.
   Promo strip is a sibling row above the listing row and must scroll away.
   Sticky fails when the filter column is as tall as its row (empty/short
   results, or Brands/Categories fully expanded): there is no leftover height
   for the column to travel in. Cap the sidebar at the viewport and give the
   listing row a min-height so the pin still has room. */
.product_filters_bar {
  position: sticky;
  top: calc(var(--sticky-header-total, 134px) + 6px);
  z-index: 40;
  background: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (min-width: 1025px) {
  .products-listing-row {
    align-items: flex-start;
    min-height: calc(100vh - 160px);
    min-height: calc(100dvh - 160px);
  }

  .products-sidebar-col {
    align-self: flex-start;
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--sticky-header-total, 134px) + 16px);
    z-index: 39;
    background: transparent;
  }

  .products-sidebar-col .sidebar {
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
  }

  .products-sidebar-col .shop-filters {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow:
      0 1px 3px 0 rgba(0, 0, 0, 0.04),
      0 1px 2px -1px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--sticky-header-total, 134px) - 32px);
    max-height: calc(100dvh - var(--sticky-header-total, 134px) - 32px);
    overflow: hidden;
  }

  .products-sidebar-col .shop-filters-header {
    flex: 0 0 auto;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    z-index: 2;
  }

  .products-sidebar-col .shop-filters-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    scrollbar-gutter: stable;
  }

  .products-sidebar-col .shop-filters .list_brand,
  .products-sidebar-col .shop-filters .tree-container {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   Shop login button busy state
   --------------------------------------------------------------------------
   Spinner + "Signing you in..." shown while the login POST is in flight.
   Markup is injected by themes/default/shop/views/user/login_form.php.
   Every rule is scoped under #kt_login_form (an id that exists ONLY in that
   partial) and the loader classes/keyframes are login-btn-* prefixed, so
   nothing here can affect any other element on the shop or backend. Pure CSS
   (no icon font needed).
   ========================================================================== */
#kt_login_form button.btn-login-loading {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: progress;
  /* Keep it visually enabled; the disabled attribute only guards against a
     double-submit, it shouldn't grey the button out. */
  opacity: 1;
}

#kt_login_form button.btn-login-loading:disabled {
  opacity: 1;
}

#kt_login_form .login-btn-loader {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

#kt_login_form .login-btn-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-btn-spin 0.6s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

#kt_login_form .login-btn-label {
  font-weight: inherit;
  letter-spacing: 0.01em;
}

/* Animated trailing dots so the wait reads as active, not stalled. */
#kt_login_form .login-btn-dots {
  display: inline-block;
  width: 0.9em;
  text-align: left;
}

#kt_login_form .login-btn-dots span {
  opacity: 0;
  animation: login-btn-dot 1.4s infinite both;
}

#kt_login_form .login-btn-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

#kt_login_form .login-btn-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes login-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes login-btn-dot {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #kt_login_form .login-btn-spinner {
    animation-duration: 1.2s;
    animation-timing-function: linear;
  }
  #kt_login_form .login-btn-dots span {
    animation: none;
    opacity: 1;
  }
}

/* ==========================================================================
   Shop Brands Directory listing (/brands)
   --------------------------------------------------------------------------
   Executive Commerce Design: Responsive tile grid, letter navigation pills,
   instant search filter, monogram avatars and full cross-browser normalization.
   ========================================================================== */
.shop-brands-page {
  padding-top: 28px;
  padding-bottom: 60px;
}

.shop-brands__filter-card {
  background: #ffffff;
  border: 1px solid #e5e9f2;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 30px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.035);
}

.shop-brands__toolbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f1f4f9;
}

.shop-brands__search-wrapper {
  position: relative;
  flex: 1 1 360px;
  max-width: 460px;
}

.shop-brands__search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  transition: color 0.18s ease;
}

.shop-brands__search-input {
  width: 100%;
  height: 46px;
  padding: 0 42px 0 46px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 14.5px;
  color: #1e293b;
  font-family: inherit;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none;
  transition: all 0.2s ease;
}

.shop-brands__search-input:focus {
  background: #ffffff;
  border-color: var(--main, #126bf5);
  box-shadow: 0 0 0 3.5px rgba(18, 107, 245, 0.12);
}

.shop-brands__search-input:focus ~ .shop-brands__search-icon {
  color: var(--main, #126bf5);
}

.shop-brands__search-input::placeholder {
  color: #94a3b8;
}

.shop-brands__search-input::-webkit-search-cancel-button,
.shop-brands__search-input::-webkit-search-decoration {
  -webkit-appearance: none !important;
  display: none !important;
}

.shop-brands__search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none;
  transition: all 0.15s ease;
}

.shop-brands__search-clear:hover {
  background: #cbd5e1;
  color: #1e293b;
}

.shop-brands__stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.shop-brands__count-badge {
  font-size: 13.5px;
  color: #64748b;
  background: #f1f5f9;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 500;
}

.shop-brands__count-badge strong {
  color: #0f172a;
  font-weight: 700;
}

.shop-brands__active-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--main, #126bf5);
  background: rgba(18, 107, 245, 0.08);
  border: 1px solid rgba(18, 107, 245, 0.2);
  padding: 4px 10px;
  border-radius: 20px;
}

.shop-brands__active-tag button {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: var(--main, #126bf5);
  -webkit-appearance: none !important;
  appearance: none !important;
}

.shop-brands__az-section {
  padding-top: 16px;
}

.shop-brands__az-label {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 10px;
}

.shop-brands__az-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.shop-brands__letter-pill {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  outline: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  color: #334155;
  min-width: 38px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-brands__letter-pill .shop-brands__pill-count {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.75;
  margin-left: 1px;
}

.shop-brands__letter-pill[data-letter="all"] {
  min-width: 54px;
  padding: 0 12px;
}

.shop-brands__letter-pill:hover:not(.is-disabled):not(.is-active) {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.06);
}

.shop-brands__letter-pill.is-active {
  background-color: var(--main, #126bf5) !important;
  border-color: var(--main, #126bf5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(18, 107, 245, 0.28) !important;
  transform: translateY(-1px);
}

.shop-brands__letter-pill.is-active .shop-brands__pill-count {
  opacity: 0.9;
}

.shop-brands__letter-pill.is-disabled,
.shop-brands__letter-pill:disabled {
  background-color: #f8fafc !important;
  border-color: #eef2f6 !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
}

.shop-brands__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1199.98px) {
  .shop-brands__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767.98px) {
  .shop-brands__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .shop-brands__filter-card {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .shop-brands__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.shop-brands__card {
  background: #ffffff;
  border: 1px solid #e8ecf4;
  border-radius: 16px;
  padding: 26px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.025);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-brands__card-top-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--main, #126bf5);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-brands__card:hover,
.shop-brands__card:focus {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
  text-decoration: none;
}

.shop-brands__card:hover .shop-brands__card-top-accent,
.shop-brands__card:focus .shop-brands__card-top-accent {
  transform: scaleX(1);
}

.shop-brands__avatar-wrap {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease;
}

.shop-brands__card:hover .shop-brands__avatar-wrap {
  transform: scale(1.06);
}

.shop-brands__logo-box {
  width: 100px;
  height: 64px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-brands__logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.shop-brands__monogram {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(18, 107, 245, 0.22);
}

.shop-brands__info {
  flex: 1 0 auto;
  width: 100%;
  margin-bottom: 14px;
}

.shop-brands__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
  margin: 0 0 6px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.18s ease;
}

.shop-brands__card:hover .shop-brands__name {
  color: var(--main, #126bf5);
}

.shop-brands__product-count {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 10px;
  border-radius: 12px;
}

.shop-brands__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--main, #126bf5);
  padding-top: 10px;
  border-top: 1px solid #f1f4f9;
  width: 100%;
  justify-content: center;
  transition: all 0.18s ease;
}

.shop-brands__action-arrow {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.shop-brands__card:hover .shop-brands__action-arrow {
  transform: translateX(4px);
}

/* Pagination Bar */
.shop-brands__pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid #e5e9f2;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.025);
}

.shop-brands__pagination-info {
  font-size: 13.5px;
  color: #64748b;
  font-weight: 500;
}

.shop-brands__pagination-info span {
  color: #0f172a;
  font-weight: 700;
}

.shop-brands__pagination-list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.shop-brands__page-btn {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  text-decoration: none;
}

.shop-brands__page-btn:hover:not(.is-active):not(:disabled) {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
}

.shop-brands__page-btn.is-active {
  background-color: var(--main, #126bf5) !important;
  border-color: var(--main, #126bf5) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(18, 107, 245, 0.28) !important;
}

.shop-brands__page-btn:disabled {
  background: #f8fafc;
  border-color: #eef2f6;
  color: #cbd5e1;
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.shop-brands__page-dots {
  padding: 0 4px;
  color: #94a3b8;
  font-size: 14px;
  user-select: none;
}

.shop-brands__empty-state,
.shop-brands__no-match {
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 56px 24px;
  text-align: center;
  margin: 20px 0;
}

.shop-brands__empty-icon,
.shop-brands__no-match-icon {
  width: 72px;
  height: 72px;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.shop-brands__empty-title,
.shop-brands__no-match-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.shop-brands__empty-text,
.shop-brands__no-match-desc {
  font-size: 14px;
  color: #64748b;
  max-width: 520px;
  margin: 0 auto 20px;
  line-height: 1.5;
  text-wrap: balance;
}

.shop-brands__no-match-term {
  font-weight: 700;
  color: #0f172a;
}

.shop-brands__reset-btn,
.shop-brands__empty-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--main, #126bf5);
  color: #ffffff;
  border: 1px solid var(--main, #126bf5);
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(18, 107, 245, 0.25);
  transition: all 0.18s ease;
}

.shop-brands__reset-btn:hover,
.shop-brands__empty-btn:hover {
  filter: brightness(0.92);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(18, 107, 245, 0.32);
}

/* Account dashboard: keep table headers aligned with their cells */
.dashboard_content .table th,
.dashboard_content .table td {
  text-align: left;
  vertical-align: middle;
}

/* Mobile My Orders: Action cells were squeezed (nowrap + 100% table + a
   short "Pending" row) so the PDF button sat flush against the next
   column. That edge — Bootstrap's cell box-shadow — read as a vertical
   line through the right of the button. */
@media (max-width: 767.98px) {
  .shop-orders-table th:nth-last-child(-n + 2),
  .shop-orders-table td:nth-last-child(-n + 2) {
    padding-left: 12px;
    padding-right: 14px;
    min-width: 6.5rem;
    border-right: 0;
    box-shadow: none;
  }

  .shop-orders-table td .btn-fill-out {
    display: inline-block;
    position: relative;
    z-index: 1;
    vertical-align: middle;
  }
}

/* Account nav: collapsed accordion picker on phones & tablets (<= 1024px) */
.dashboard_menu_toggle {
  display: none;
}

@media (max-width: 1024.98px) {
  #dashboard-menu-nav {
    padding-top: 8px;
  }
  .dashboard_menu {
    position: static !important;
    margin-bottom: 20px !important;
    overflow: hidden;
    max-height: none !important;
  }
  .dashboard_menu_toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
    background-color: var(--main, #0f172a);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
  }
  .dashboard_menu_toggle_current {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
  }
  .dashboard_menu_toggle_icon {
    flex: 0 0 auto;
    margin-right: 0;
  }
  .dashboard_menu_toggle_label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard_menu_toggle_chevron {
    flex: 0 0 auto;
    font-size: 12px;
    transition: transform 0.2s ease;
  }
  .dashboard_menu.is-open .dashboard_menu_toggle_chevron {
    transform: rotate(180deg);
  }
  .dashboard_menu .nav-tabs {
    display: none !important;
    border-bottom: 0;
  }
  .dashboard_menu.is-open .nav-tabs {
    display: flex !important;
  }

  .dashboard_menu_col,
  .dashboard_content_col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}



/* Force light color scheme for native form controls */
:root {
  color-scheme: light;
}

select,
select option,
select optgroup {
  color-scheme: light !important;
  background-color: #ffffff !important;
  color: #212529 !important;
}

/* ==========================================================================
   Custom Select2 Dropdown Styling - Modern, Clean & Polished UI
   ========================================================================== */
.product_header .custom_select::before,
.custom_select:has(.select2-container)::before {
  display: none !important;
}

.product_header .select2-container {
  min-width: 140px;
  max-width: 220px;
  width: 100% !important;
}

.product_header .product_per_page_wrapper .select2-container {
  min-width: 76px !important;
  max-width: 90px !important;
  width: 82px !important;
}

@media (max-width: 767.98px) {
  .product_header .select2-container {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Base Trigger Selection Box */
.select2-container--default .select2-selection--single {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  outline: none !important;
  cursor: pointer !important;
}

.select2-container--default .select2-selection--single:hover {
  border-color: #94a3b8 !important;
  background-color: #fafbfd !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--main, #3b82f6) !important;
  /* box-shadow: 0 0 0 3px color-mix(in srgb, var(--main, #3b82f6) 18%, transparent) !important; */
  background-color: #ffffff !important;
}

/* Rendered Text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1e293b !important;
  line-height: 36px !important;
  padding-left: 12px !important;
  padding-right: 44px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}

/* Clear (×) Button */
.select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute !important;
  right: 28px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border: none !important;
  background: #f1f5f9 !important;
  border-radius: 50% !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear span {
  display: inline-block !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Arrow: Modern animated chevron */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 10px !important;
  width: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 1.8px solid #64748b !important;
  border-bottom: 1.8px solid #64748b !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 !important;
  position: static !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  transform: rotate(-135deg) translateY(-2px) !important;
  border-color: var(--main, #3b82f6) !important;
}

/* Dropdown Floating Panel */
.select2-dropdown {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.05) !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.select2-dropdown--above {
  border-radius: 10px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.select2-dropdown--below {
  border-radius: 10px !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* Options Container */
.select2-container--default .select2-results__options {
  background-color: #ffffff !important;
  padding: 4px !important;
  max-height: 220px !important;
}

/* Dropdown List Items */
.select2-container--default .select2-results__option {
  position: relative !important;
  background-color: transparent !important;
  color: #334155 !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  margin-bottom: 2px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.select2-container--default .select2-results__option:last-child {
  margin-bottom: 0 !important;
}

/* Hover / Keyboard Highlight State (Soft Slate) */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 500 !important;
}

/* Selected State (Soft Accent Background with Checkmark on the Right) */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #f1f5f9 !important;
  background-color: color-mix(in srgb, var(--main, #3b82f6) 10%, transparent) !important;
  color: var(--main, #3b82f6) !important;
  font-weight: 500 !important;
}

.select2-container--default .select2-results__option[aria-selected="true"]::after {
  content: "✓";
  font-size: 13px;
  font-weight: 600;
  color: var(--main, #3b82f6);
  margin-left: 8px;
}

/* Selected + Hovered State */
.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
  background-color: #e2e8f0 !important;
  background-color: color-mix(in srgb, var(--main, #3b82f6) 18%, transparent) !important;
  color: var(--main, #3b82f6) !important;
  font-weight: 500 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected="true"]::after {
  color: var(--main, #3b82f6) !important;
}

/* ==========================================================================
   Products Empty State
   ========================================================================== */
.products-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 42px 24px;
  margin: 12px 0 28px;
  background: #ffffff;
  border: 1.5px dashed #cbd5e1;
  border-radius: 14px;
  width: 100%;
}

.products-empty-state .empty-state-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #f1f5f9;
  color: var(--main, #126bf5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
}

.products-empty-state .empty-state-title {
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 6px;
}

.products-empty-state .empty-state-text {
  font-size: 13.5px;
  color: #64748b;
  max-width: 440px;
  margin: 0;
  line-height: 1.5;
}

/* ==========================================================================
   Live Search Dropdown: High-opacity clean loading overlay
   ========================================================================== */
#show-search-products {
  background: #ffffff !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#show-search-products.search-dropdown-loading {
  pointer-events: none;
  opacity: 1 !important;
}

#show-search-products.search-dropdown-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  border-radius: inherit;
  pointer-events: all;
}

#show-search-products.search-dropdown-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  margin-left: -16px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--main, #634099);
  border-radius: 50%;
  z-index: 1000;
  animation: search-spin 0.75s linear infinite;
}

.search-loading {
  min-height: 160px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff !important;
}

.search-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top: 3px solid var(--main);
  border-radius: 50%;
  animation: search-spin 0.75s linear infinite;
  margin: 0 auto 10px;
}

.search-loading-text {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

/* ==========================================================================
   Account & Orders Table Pagination (Orders, Payments, Frequent Products)
   ========================================================================== */
.orders-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.orders-page-info {
  font-size: 13.5px;
  color: #6c757d;
}

.orders-pagination-wrap {
  display: flex;
  align-items: center;
}

.pagination,
.orders-pagination-wrap .pagination {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pagination li,
.pagination .page-item,
.orders-pagination-wrap .pagination li {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pagination li a,
.pagination li span,
.pagination li .page-link,
.pagination li.active a,
.pagination li.active span,
.pagination li.active .page-link,
.pagination .page-item a,
.pagination .page-item span,
.pagination .page-item .page-link,
.pagination .page-item.active a,
.pagination .page-item.active span,
.pagination .page-item.active .page-link,
.orders-pagination-wrap .pagination li a,
.orders-pagination-wrap .pagination li span,
.orders-pagination-wrap .pagination li .page-link,
.orders-pagination-wrap .pagination li.active a,
.orders-pagination-wrap .pagination li.active span,
.orders-pagination-wrap .pagination li.active .page-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  text-align: center !important;
  position: static !important;
  float: none !important;
}

.pagination li a,
.pagination li span,
.pagination li .page-link,
.pagination .page-item a,
.pagination .page-item span,
.pagination .page-item .page-link,
.orders-pagination-wrap .pagination li a,
.orders-pagination-wrap .pagination li span,
.orders-pagination-wrap .pagination li .page-link {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #4b5563 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease-in-out !important;
}

.pagination li a i,
.pagination li span i,
.pagination li .page-link i,
.pagination .page-item a i,
.pagination .page-item span i,
.pagination .page-item .page-link i,
.orders-pagination-wrap .pagination li a i,
.orders-pagination-wrap .pagination li span i,
.orders-pagination-wrap .pagination li .page-link i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pagination li.active a,
.pagination li.active span,
.pagination li.active .page-link,
.pagination li .page-link.active,
.pagination .page-item.active a,
.pagination .page-item.active span,
.pagination .page-item.active .page-link,
.pagination .page-item .page-link.active,
.orders-pagination-wrap .pagination li.active a,
.orders-pagination-wrap .pagination li.active span,
.orders-pagination-wrap .pagination li.active .page-link,
.orders-pagination-wrap .pagination li .page-link.active {
  background-color: var(--main, #126bf5) !important;
  border: 1px solid var(--main, #126bf5) !important;
  border-color: var(--main, #126bf5) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--main, #126bf5) 35%, transparent) !important;
  cursor: default !important;
  transform: none !important;
}

.pagination li a:hover:not(.active),
.pagination li .page-link:hover:not(.active),
.pagination li:not(.active):not(.disabled) a:hover,
.pagination li:not(.active):not(.disabled) .page-link:hover,
.pagination .page-item:not(.active):not(.disabled) a:hover,
.pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.pagination .page-item:not(.active):not(.disabled) span:hover,
.orders-pagination-wrap .pagination li a:hover:not(.active),
.orders-pagination-wrap .pagination li .page-link:hover:not(.active),
.orders-pagination-wrap .pagination li:not(.active):not(.disabled) a:hover,
.orders-pagination-wrap .pagination li:not(.active):not(.disabled) .page-link:hover {
  background-color: #f3f4f6 !important;
  color: var(--main, #126bf5) !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

.pagination li.disabled a,
.pagination li.disabled span,
.pagination li.disabled .page-link,
.pagination .page-item.disabled a,
.pagination .page-item.disabled span,
.pagination .page-item.disabled .page-link,
.orders-pagination-wrap .pagination li.disabled a,
.orders-pagination-wrap .pagination li.disabled span,
.orders-pagination-wrap .pagination li.disabled .page-link {
  color: #9ca3af !important;
  background-color: #f9fafb !important;
  border-color: #f3f4f6 !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 767.98px) {
  .orders-footer-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    width: 100%;
  }

  .orders-pagination-wrap {
    width: 100%;
    justify-content: center;
  }

  .pagination,
  .orders-pagination-wrap .pagination {
    justify-content: center !important;
    gap: 4px;
    max-width: 100%;
  }

  .pagination li a,
  .pagination li span,
  .pagination li .page-link,
  .pagination li.active a,
  .pagination li.active span,
  .pagination li.active .page-link,
  .pagination .page-item a,
  .pagination .page-item span,
  .pagination .page-item .page-link,
  .pagination .page-item.active a,
  .pagination .page-item.active span,
  .pagination .page-item.active .page-link,
  .orders-pagination-wrap .pagination li a,
  .orders-pagination-wrap .pagination li span,
  .orders-pagination-wrap .pagination li .page-link,
  .orders-pagination-wrap .pagination li.active a,
  .orders-pagination-wrap .pagination li.active span,
  .orders-pagination-wrap .pagination li.active .page-link {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    border-radius: 6px !important;
  }
}

/* ==========================================================================
   Bootstrap-datepicker popup
   Keep native 7-column table layout (colspan on title + floated month spans).
   ========================================================================== */
.datepicker.datepicker-dropdown {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  padding: 6px 8px 4px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 12px 40px -8px rgba(15, 23, 42, 0.14),
              0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
  font-family: inherit !important;
  background: #ffffff !important;
  z-index: 10550 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.datepicker.datepicker-dropdown:before,
.datepicker.datepicker-dropdown:after {
  display: none !important;
}

.datepicker.datepicker-dropdown table {
  width: 100% !important;
  table-layout: fixed !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Equal 7-column day grid. Do not set a % width on every cell — that
   fights the title row colspan and stretches the Prev button. */
.datepicker.datepicker-dropdown table tr td,
.datepicker.datepicker-dropdown table tr th {
  width: auto !important;
  height: 28px !important;
  padding: 0 !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 28px !important;
  box-sizing: border-box !important;
}

.datepicker.datepicker-dropdown table thead tr:first-child th {
  height: 28px !important;
  line-height: 28px !important;
}

.datepicker.datepicker-dropdown table thead th.prev,
.datepicker.datepicker-dropdown table thead th.next {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

.datepicker.datepicker-dropdown table thead th.prev:hover,
.datepicker.datepicker-dropdown table thead th.next:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.datepicker.datepicker-dropdown .datepicker-switch {
  width: auto !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  border-radius: 6px !important;
}

.datepicker.datepicker-dropdown .datepicker-switch:hover {
  background: #f1f5f9 !important;
}

.datepicker.datepicker-dropdown table tr th.dow {
  height: 20px !important;
  line-height: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  background: transparent !important;
  cursor: default !important;
}

.datepicker.datepicker-dropdown table tr td.day {
  border-radius: 6px !important;
  cursor: pointer !important;
}

.datepicker.datepicker-dropdown table tr td.day:hover,
.datepicker.datepicker-dropdown table tr td.focused {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.datepicker.datepicker-dropdown table tr td.active,
.datepicker.datepicker-dropdown table tr td.active:hover,
.datepicker.datepicker-dropdown table tr td.active.disabled,
.datepicker.datepicker-dropdown table tr td.active.disabled:hover {
  background: var(--main, #3b82f6) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  border-radius: 6px !important;
}

.datepicker.datepicker-dropdown table tr td.today {
  background: transparent !important;
  color: var(--main, #3b82f6) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1.5px var(--main, #3b82f6) !important;
}

.datepicker.datepicker-dropdown table tr td.today:hover {
  background: color-mix(in srgb, var(--main, #3b82f6) 8%, transparent) !important;
}

.datepicker.datepicker-dropdown table tr td.today.active {
  color: #ffffff !important;
  background: var(--main, #3b82f6) !important;
  box-shadow: none !important;
}

.datepicker.datepicker-dropdown table tr td.old,
.datepicker.datepicker-dropdown table tr td.new {
  color: #cbd5e1 !important;
}

.datepicker.datepicker-dropdown table tr td.disabled,
.datepicker.datepicker-dropdown table tr td.disabled:hover {
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

.datepicker.datepicker-dropdown .datepicker-months tbody td,
.datepicker.datepicker-dropdown .datepicker-years tbody td,
.datepicker.datepicker-dropdown .datepicker-decades tbody td,
.datepicker.datepicker-dropdown .datepicker-centuries tbody td {
  height: auto !important;
  line-height: normal !important;
  padding: 4px 0 2px !important;
}

.datepicker.datepicker-dropdown table tr td span {
  display: block !important;
  float: left !important;
  width: 23% !important;
  height: 28px !important;
  line-height: 28px !important;
  margin: 1% !important;
  padding: 0 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-align: center !important;
  cursor: pointer !important;
}

.datepicker.datepicker-dropdown table tr td span:hover,
.datepicker.datepicker-dropdown table tr td span.focused {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.datepicker.datepicker-dropdown table tr td span.active,
.datepicker.datepicker-dropdown table tr td span.active:hover,
.datepicker.datepicker-dropdown table tr td span.active.disabled,
.datepicker.datepicker-dropdown table tr td span.active.disabled:hover {
  background: var(--main, #3b82f6) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

.datepicker.datepicker-dropdown table tr td span.old,
.datepicker.datepicker-dropdown table tr td span.new {
  color: #94a3b8 !important;
}

.datepicker.datepicker-dropdown table tr td span.disabled,
.datepicker.datepicker-dropdown table tr td span.disabled:hover {
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

.datepicker.datepicker-dropdown.datepicker-orient-bottom {
  margin-top: 4px !important;
}

.datepicker.datepicker-dropdown.datepicker-orient-top {
  margin-bottom: 4px !important;
}

.datepicker.datepicker-dropdown table tfoot {
  display: table-caption !important;
  caption-side: bottom !important;
  width: 100% !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.datepicker.datepicker-dropdown table tfoot tr {
  display: inline-block !important;
  width: auto !important;
  vertical-align: middle !important;
}

.datepicker.datepicker-dropdown table tfoot tr th.today,
.datepicker.datepicker-dropdown table tfoot tr th.clear {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.3 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--main, #3b82f6) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  background: transparent !important;
}

.datepicker.datepicker-dropdown table tfoot tr th.today:hover,
.datepicker.datepicker-dropdown table tfoot tr th.clear:hover {
  background: color-mix(in srgb, var(--main, #3b82f6) 8%, transparent) !important;
}

.datepicker.datepicker-dropdown table tfoot tr th.today::after {
  content: '·';
  display: inline-block;
  color: #cbd5e1;
  font-size: 16px;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: middle;
  pointer-events: none;
}