/**
 * ANBOOST Storefront — Premium Polish (cascade winner)
 * Phase 2 isolation: keep tokens + true form/control utilities shared;
 * page chrome (buttons, filters, breadcrumbs, cart/checkout/account) is scoped.
 * Product-card / PLP image ownership stays with theme + .shop-area/plp-shelf.
 */

/* ------------------------------------------------------------------
   SHARED — token remaps (merchant light neutrals → readable)
   ------------------------------------------------------------------ */
:root {
  --extra-light-color: #526277;
  --light-color: #3f4b5c;
  --sf-placeholder: #526277;
  --sf-muted: #526277;
}

/* ------------------------------------------------------------------
   SHARED — form / search / nice-select utilities
   ------------------------------------------------------------------ */
#search_form_input,
.navbar-input .form--control,
.search-open-form .form--control,
.searchbar-suggetions .form--control,
.item-search,
.search-bar .item-search,
.menu-search-form .item-search,
.single-shop-left-search-input .form--control,
.sidebar-search-form .form--control,
.single-input .form--control,
.checkout-area .form--control,
.checkout-form .form--control,
.checkout-form-wrapper .form--control,
.form--control,
.form-control,
.form--input,
input[type="text"]:not([class*="qty"]):not(.quantity-input):not(.quick-view-quantity-input),
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea.form--control,
textarea.form-control {
  color: var(--sf-ink) !important;
  -webkit-text-fill-color: var(--sf-ink);
  caret-color: var(--sf-ink);
  font-weight: 500 !important;
  font-size: 0.975rem !important;
  line-height: 1.45 !important;
  min-height: var(--sf-control-height);
  border: 1px solid var(--sf-border-strong) !important;
  border-radius: var(--sf-radius-md) !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

#search_form_input::placeholder,
.navbar-input .form--control::placeholder,
.search-open-form .form--control::placeholder,
.item-search::placeholder,
.single-shop-left-search-input .form--control::placeholder,
.single-input .form--control::placeholder,
.checkout-area .form--control::placeholder,
.form--control::placeholder,
.form-control::placeholder,
.form--input::placeholder,
input::placeholder,
textarea::placeholder,
#search_form_input::-webkit-input-placeholder,
.navbar-input .form--control::-webkit-input-placeholder,
.item-search::-webkit-input-placeholder,
.single-input .form--control::-webkit-input-placeholder,
.form--control::-webkit-input-placeholder,
#search_form_input::-moz-placeholder,
.form--control::-moz-placeholder,
.single-input .form--control::-moz-placeholder,
#search_form_input:-ms-input-placeholder,
.form--control:-ms-input-placeholder,
.single-input .form--control:-ms-input-placeholder {
  color: var(--sf-placeholder) !important;
  -webkit-text-fill-color: var(--sf-placeholder) !important;
  opacity: 1 !important;
  font-weight: 450 !important;
}

#search_form_input:focus,
.navbar-input .form--control:focus,
.item-search:focus,
.single-shop-left-search-input .form--control:focus,
.single-input .form--control:focus,
.form--control:focus,
.form-control:focus {
  color: var(--sf-ink) !important;
  -webkit-text-fill-color: var(--sf-ink);
  border-color: var(--main-color-one, #1E88E5) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-color-one, #1E88E5) 22%, transparent) !important;
  outline: none !important;
}

.navbar-input {
  position: relative;
}

.navbar-input .form--control {
  height: 3.25rem !important;
  padding-inline: 3rem 1.15rem !important;
}

.single-input label,
.form-group label,
.single-info-input label {
  color: var(--sf-ink) !important;
  font-size: 0.8125rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em;
  margin-bottom: 0.45rem !important;
}

.nice-select {
  color: var(--sf-ink) !important;
  border: 1px solid var(--sf-border-strong) !important;
  border-radius: var(--sf-radius-md) !important;
  min-height: var(--sf-control-height);
  font-weight: 500;
}

/* Blog / alt sidebar search — component-scoped */
.sidebar-search-form .single-search-sidebar {
  position: relative !important;
}

.sidebar-search-form .single-search-sidebar .form--control {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-inline-start: 15px !important;
  padding-inline-end: 40px !important;
}

.sidebar-search-form .single-search-sidebar button {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  inset-inline-end: 15px !important;
  inset-inline-start: auto !important;
  height: 100% !important;
}

html:not([dir="rtl"]) .sidebar-search-form .single-search-sidebar button,
[dir="ltr"] .sidebar-search-form .single-search-sidebar button {
  right: 15px !important;
  left: auto !important;
}

[dir="rtl"] .sidebar-search-form .single-search-sidebar button,
html[dir="rtl"] .sidebar-search-form .single-search-sidebar button {
  left: 15px !important;
  right: auto !important;
}

[dir="rtl"] .sidebar-search-form .single-search-sidebar .form--control,
html[dir="rtl"] .sidebar-search-form .single-search-sidebar .form--control {
  padding-right: 15px !important;
  padding-left: 40px !important;
}

/* ------------------------------------------------------------------
   .shop-area — sidebar search + filters + toolbar results + pagination
   ------------------------------------------------------------------ */
.shop-area .single-shop-left-search-input {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.shop-area .single-shop-left-search-input form {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

.shop-area .single-shop-left-search-input .form--control {
  height: 3.1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid var(--sf-border-strong) !important;
  padding-block: 0 !important;
  padding-inline-start: 1rem !important;
  padding-inline-end: 4.5rem !important;
  text-overflow: ellipsis;
}

.shop-area .single-shop-left-search-input button {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  max-width: 3.5rem !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-start-end-radius: var(--sf-radius-md, 0.55rem) !important;
  border-end-end-radius: var(--sf-radius-md, 0.55rem) !important;
}

html:not([dir="rtl"]) .shop-area .single-shop-left-search-input button,
[dir="ltr"] .shop-area .single-shop-left-search-input button {
  right: 0 !important;
  left: auto !important;
}

[dir="rtl"] .shop-area .single-shop-left-search-input button,
html[dir="rtl"] .shop-area .single-shop-left-search-input button {
  left: 0 !important;
  right: auto !important;
}

[dir="rtl"] .shop-area .single-shop-left-search-input .form--control,
html[dir="rtl"] .shop-area .single-shop-left-search-input .form--control {
  padding-inline-start: 1rem !important;
  padding-inline-end: 4.5rem !important;
  padding-right: 1rem !important;
  padding-left: 4.5rem !important;
}

.shop-area .single-shop-left .shop-left-title .title,
.shop-area .shop-left-title .title.title-borders {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--sf-ink) !important;
  margin: 0 0 0.85rem !important;
  padding-bottom: 0.65rem !important;
}

.shop-area .filter-lists .list label,
.shop-area .filter-lists .list a,
.shop-area .single-shop-left .filter-lists .list label,
.shop-area .category-lists .list .item,
.shop-area .category-lists .list a {
  color: var(--sf-body-readable) !important;
  font-size: 0.9375rem !important;
  font-weight: 550 !important;
}

.shop-area .filter-lists .list.active label,
.shop-area .filter-lists .list.active a,
.shop-area .category-lists .list.active > a {
  color: var(--sf-ink) !important;
  font-weight: 650 !important;
}

.shop-area .showing-results,
.shop-area .showing-results.color-light {
  color: var(--sf-body-readable) !important;
  font-weight: 550 !important;
  font-size: 0.9rem !important;
}

.shop-area .pagination .pagination-list li .page-number,
.shop-area .pagination-list .page-number {
  width: 2.5rem !important;
  height: 2.5rem !important;
  line-height: 2.5rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border-radius: var(--sf-radius-md) !important;
  background: #fff !important;
  border: 1px solid var(--sf-border-strong) !important;
  color: var(--sf-body-readable) !important;
}

.shop-area .pagination .pagination-list li.active .page-number,
.shop-area .pagination .pagination-list li .page-number:hover {
  background: var(--sf-ink) !important;
  border-color: var(--sf-ink) !important;
  color: #fff !important;
}

.shop-area .size-lists .list a,
.shop-details-contents .size-lists .list a,
#product_quick_view .size-lists .list a {
  border-radius: var(--sf-radius-md) !important;
  min-height: 2.4rem;
  padding: 0.45rem 0.9rem !important;
  border: 1px solid var(--sf-border-strong) !important;
  color: var(--sf-ink) !important;
  font-weight: 550 !important;
}

.shop-area .size-lists .list.active a,
.shop-details-contents .size-lists .list.active a,
#product_quick_view .size-lists .list.active a {
  border-color: var(--main-color-one) !important;
  color: var(--main-color-one) !important;
  font-weight: 650 !important;
}

.shop-area .color-lists .list > a,
.shop-area .color-lists .list a,
.shop-details-contents .color-lists .list > a,
.shop-details-contents .color-lists .list a,
#product_quick_view .color-lists .list > a,
#product_quick_view .color-lists .list a {
  height: 1.85rem !important;
  width: 1.85rem !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
}

/* ------------------------------------------------------------------
   BUTTONS — scoped (no body .cmn-btn sitewide)
   ------------------------------------------------------------------ */
.shop-area .cmn-btn,
.shop-area a.cmn-btn,
.shop-area button.cmn-btn,
.shop-area .btn-wrapper .cmn-btn,
.checkout-area .cmn-btn,
.checkout-area a.cmn-btn,
.checkout-area button.cmn-btn,
.checkout-area .btn-wrapper .cmn-btn,
.cart-area .cmn-btn,
.cart-area a.cmn-btn,
.cart-area button.cmn-btn,
.cart-area .btn-wrapper .cmn-btn,
.wishlist-area .cmn-btn,
.wishlist-area a.cmn-btn,
.wishlist-area button.cmn-btn,
.wishlist-area .btn-wrapper .cmn-btn,
.user-dashboard .cmn-btn,
.user-dashboard a.cmn-btn,
.user-dashboard button.cmn-btn,
.user-dashboard .btn-wrapper .cmn-btn,
#product_quick_view .cmn-btn,
#product_quick_view a.cmn-btn,
#product_quick_view button.cmn-btn,
#product_quick_view .btn-wrapper .cmn-btn,
.shop-details-contents .cmn-btn,
.shop-details-contents a.cmn-btn,
.shop-details-contents button.cmn-btn,
.shop-details-contents .btn-wrapper .cmn-btn,
.cart-shopping .cmn-btn,
.cart-shopping a.cmn-btn,
.cart-shopping .btn-wrapper .cmn-btn {
  min-height: var(--sf-cta-height) !important;
  padding: 0.8rem 1.55rem !important;
  border-radius: var(--sf-radius-md) !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.25 !important;
  transition:
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 120ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.shop-area .cmn-btn:hover,
.checkout-area .cmn-btn:hover,
.cart-area .cmn-btn:hover,
.wishlist-area .cmn-btn:hover,
.user-dashboard .cmn-btn:hover,
#product_quick_view .cmn-btn:hover,
.shop-details-contents .cmn-btn:hover,
.cart-shopping .cmn-btn:hover,
.shop-area a.cmn-btn:hover,
.checkout-area a.cmn-btn:hover,
.shop-details-contents a.cmn-btn:hover,
.cart-shopping a.cmn-btn:hover {
  transform: translateY(var(--sf-lift-hover, -1px));
  box-shadow: var(--sf-shadow-sm) !important;
}

.shop-area .cmn-btn-bg-1:hover,
.shop-area .cmn-btn.btn-bg-1:hover,
.shop-area .cmn-btn-bg-heading:hover,
.checkout-area .cmn-btn-bg-1:hover,
.checkout-area .cmn-btn.btn-bg-1:hover,
.cart-area .cmn-btn-bg-1:hover,
.wishlist-area .cmn-btn-bg-1:hover,
.user-dashboard .cmn-btn-bg-1:hover,
#product_quick_view .cmn-btn-bg-1:hover,
.shop-details-contents .cmn-btn-bg-1:hover,
.shop-details-contents .cmn-btn.btn-bg-1:hover,
.cart-shopping .cmn-btn-bg-1:hover,
.shop-area .btn-wrapper .cmn-btn-bg-1:hover,
.checkout-area .btn-wrapper .cmn-btn-bg-1:hover,
.shop-details-contents .btn-wrapper .cmn-btn-bg-1:hover,
.cart-shopping .btn-wrapper .cmn-btn-bg-1:hover {
  background-color: var(--sf-action) !important;
  border-color: var(--sf-action) !important;
  color: #fff !important;
  filter: brightness(0.92);
}

.shop-area .cmn-btn-bg-2:hover,
.checkout-area .cmn-btn-bg-2:hover,
.shop-details-contents .cmn-btn-bg-2:hover,
#product_quick_view .cmn-btn-bg-2:hover,
.cart-shopping .cmn-btn-bg-2:hover {
  background-color: var(--main-color-two, var(--sf-action-2)) !important;
  border-color: var(--main-color-two, var(--sf-action-2)) !important;
}

.shop-area .cmn-btn-bg-3:hover,
.checkout-area .cmn-btn-bg-3:hover,
.shop-details-contents .cmn-btn-bg-3:hover,
#product_quick_view .cmn-btn-bg-3:hover {
  background-color: var(--main-color-three, var(--sf-action)) !important;
  border-color: var(--main-color-three, var(--sf-action)) !important;
}

.shop-area .cmn-btn-bg-4:hover,
.checkout-area .cmn-btn-bg-4:hover,
.shop-details-contents .cmn-btn-bg-4:hover,
#product_quick_view .cmn-btn-bg-4:hover {
  background-color: var(--main-color-four, var(--sf-action)) !important;
  border-color: var(--main-color-four, var(--sf-action)) !important;
}

.shop-area .cmn-btn-outline-one:hover,
.checkout-area .cmn-btn-outline-one:hover,
.cart-area .cmn-btn-outline-one:hover,
.wishlist-area .cmn-btn-outline-one:hover,
.shop-details-contents .cmn-btn-outline-one:hover,
#product_quick_view .cmn-btn-outline-one:hover,
.cart-shopping .cmn-btn-outline-one:hover,
.shop-area .cmn-btn.btn-outline-one:hover,
.shop-details-contents .cmn-btn.btn-outline-one:hover {
  background-color: color-mix(in srgb, var(--sf-action) 8%, #fff) !important;
  color: var(--sf-action) !important;
  border-color: var(--sf-action) !important;
  filter: none;
}

.shop-area .cmn-btn:active,
.checkout-area .cmn-btn:active,
.cart-area .cmn-btn:active,
.wishlist-area .cmn-btn:active,
.user-dashboard .cmn-btn:active,
#product_quick_view .cmn-btn:active,
.shop-details-contents .cmn-btn:active,
.cart-shopping .cmn-btn:active,
.shop-area a.cmn-btn:active,
.shop-details-contents a.cmn-btn:active,
.shop-area button.cmn-btn:active,
.shop-details-contents button.cmn-btn:active {
  transform: scale(var(--sf-press-scale, 0.98)) !important;
}

/* ------------------------------------------------------------------
   BREADCRUMB — .breadcrumb-area only
   ------------------------------------------------------------------ */
.breadcrumb-area .breadcrumb-contents-title,
.breadcrumb-area .breadcrumb-contents .title,
.breadcrumb-area .page-title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important;
  font-weight: 650 !important;
  color: var(--sf-ink) !important;
  letter-spacing: -0.025em !important;
}

.breadcrumb-area .breadcrumb-contents-list .list,
.breadcrumb-area .breadcrumb-contents-list .list a,
.breadcrumb-area .breadcrumb-item,
.breadcrumb-area .breadcrumb-item a {
  font-size: 0.9rem !important;
  font-weight: 550 !important;
  color: var(--sf-body-readable) !important;
}

.breadcrumb-area .breadcrumb-contents-list .list.active,
.breadcrumb-area .breadcrumb-item.active {
  color: var(--sf-ink) !important;
  font-weight: 650 !important;
}

/* ------------------------------------------------------------------
   SHARED micro — sale/discount chips only (no card badge hooks)
   ------------------------------------------------------------------ */
.discount-badge,
.sale-badge {
  border-radius: 0.4rem !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 0.32rem 0.6rem !important;
}

/* ------------------------------------------------------------------
   CART / WISHLIST
   ------------------------------------------------------------------ */
.cart-area table thead th,
.wishlist-area table thead th {
  font-size: 0.78rem !important;
  font-weight: 650 !important;
  color: var(--sf-body-readable) !important;
  letter-spacing: 0.05em !important;
}

.cart-area .name-title,
.wishlist-area .name-title {
  color: var(--sf-ink) !important;
  font-weight: 650 !important;
}

.cart-area .name-subtitle,
.wishlist-area .name-subtitle {
  color: var(--sf-muted) !important;
  font-size: 0.8125rem !important;
}

.cart-area .product-name-table .badge.bg-primary,
.cart-area .carts-contents .badge.bg-primary,
.wishlist-area .product-name-table .badge.bg-primary {
  background: #f2f4f7 !important;
  color: var(--sf-body-readable) !important;
  border: 1px solid var(--sf-hairline) !important;
  font-size: 0.6875rem !important;
  font-weight: 650 !important;
}

.wishlist-area .close-table-wishlist,
.cart-area .close-table-cart {
  color: var(--sf-muted) !important;
}

.wishlist-area .close-table-wishlist:hover,
.cart-area .close-table-cart:hover {
  color: #b42318 !important;
}

.cart-shopping .btn-wrapper .cmn-btn:first-child:not(:only-child) {
  background: transparent !important;
  color: var(--sf-ink) !important;
  border: 1.5px solid var(--sf-border-strong) !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------------
   CHECKOUT
   ------------------------------------------------------------------ */
.checkout-area .checkout-inner-title {
  font-size: 1.2rem !important;
  font-weight: 650 !important;
  color: var(--sf-ink) !important;
}

.checkout-area .checkout-right-side .cmn-btn,
.checkout-area .order-btn .cmn-btn {
  min-height: var(--sf-cta-height) !important;
  font-weight: 700 !important;
}

/* ------------------------------------------------------------------
   PDP / QUICK VIEW CTAs + qty
   ------------------------------------------------------------------ */
.shop-details-contents .but_now_single_page,
.shop-details-contents .but_now_single_page.cmn-btn,
#product_quick_view .quick_view_but_now {
  background: transparent !important;
  color: var(--sf-ink) !important;
  border: 1.5px solid var(--sf-ink) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

.shop-details-contents .add_to_cart_single_page,
#product_quick_view .quick_view_add_to_cart {
  font-weight: 700 !important;
}

.shop-details-contents .quantity-input,
#product_quick_view .quick-view-quantity-input,
.cart-area input.qty_,
.shop-details-contents input.qty_ {
  color: var(--sf-ink) !important;
  -webkit-text-fill-color: var(--sf-ink);
  font-weight: 650 !important;
}

/* ------------------------------------------------------------------
   ACCOUNT
   ------------------------------------------------------------------ */
.user-dashboard .seller-profile-details-area .single-orders,
.user-dashboard .orders-child .single-orders,
.user-dashboard .orders-child:nth-child(n) .single-orders,
.user-dashboard .single-orders,
.seller-profile-details-area .single-orders {
  background: #fff !important;
  border: 1px solid var(--sf-hairline) !important;
  border-radius: var(--sf-radius-lg) !important;
  box-shadow: var(--sf-shadow-sm) !important;
  padding: 1.35rem 1.25rem !important;
}

.user-dashboard .single-orders .order-titles,
.user-dashboard .orders-flex-content .order-titles,
.seller-profile-details-area .single-orders .order-titles {
  color: var(--sf-ink) !important;
  font-size: 1.35rem !important;
  line-height: 1.25 !important;
}

.user-dashboard .single-orders .order-para,
.user-dashboard .orders-flex-content .order-para,
.seller-profile-details-area .single-orders .order-para {
  color: var(--sf-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 550 !important;
}

.user-dashboard .single-orders .orders-flex-content .icon,
.seller-profile-details-area .single-orders .orders-flex-content .icon {
  height: 3rem !important;
  width: 3rem !important;
  font-size: 1.25rem !important;
  background: color-mix(in srgb, var(--main-color-one) 12%, #fff) !important;
  color: var(--main-color-one) !important;
}

/* ------------------------------------------------------------------
   SHARED — modal backdrop + quick-view shell
   ------------------------------------------------------------------ */
.mfp-bg,
.modal-backdrop {
  background: rgba(15, 23, 42, 0.48) !important;
  opacity: 1 !important;
}

#product_quick_view .modal-content,
.product-quick-view .modal-content {
  border-radius: 1rem !important;
  box-shadow: var(--sf-shadow-md) !important;
  border: 1px solid var(--sf-hairline) !important;
}