/* =====================================================================
   Modern UI layer – loaded LAST so it refines the existing theme.
   Colors follow the theme variables when available.
   ===================================================================== */
:root{
  --mu-primary: var(--primary-color, #ff6b00);
  --mu-primary-dark: #e45d00;
  --mu-ink: #1f2937;
  --mu-muted: #6b7280;
  --mu-line: #eef0f3;
  --mu-bg: #f6f7fb;
  --mu-card: #ffffff;
  --mu-radius: 14px;
  --mu-shadow: 0 2px 10px rgba(16,24,40,.06);
  --mu-shadow-lg: 0 14px 34px rgba(16,24,40,.14);
  --mu-success: #16a34a;
}
body{ background: var(--mu-bg); color: var(--mu-ink); -webkit-font-smoothing: antialiased; }
a{ transition: color .2s ease; }
img{ max-width:100%; }

/* ---------- Buttons ---------- */
.btn, button.btn, .btn-place-order, .add_cart_btn, .order_now_btn, .order-btn, .order-btn-link, .go_cart, .pro_btn a, .pro_btn button{
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .1px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease !important;
}
.btn:active, .btn-place-order:active, .add_cart_btn:active, .order_now_btn:active{ transform: scale(.98); }
.add_cart_btn, .btn-primary, .btn-place-order, .go_cart{
  background: linear-gradient(135deg, var(--mu-primary), var(--mu-primary-dark)) !important;
  border: 0 !important; color:#fff !important;
  box-shadow: 0 6px 16px rgba(255,107,0,.28);
}
.add_cart_btn:hover, .btn-primary:hover, .btn-place-order:hover, .go_cart:hover{
  box-shadow: 0 10px 22px rgba(255,107,0,.36); transform: translateY(-1px); color:#fff !important;
}
.order_now_btn, .order-btn, .order-btn-link{
  background: linear-gradient(135deg, #16a34a, #15803d) !important; border:0 !important; color:#fff !important;
  box-shadow: 0 6px 16px rgba(22,163,74,.28);
}
.order_now_btn:hover, .order-btn:hover, .order-btn-link:hover{ box-shadow: 0 10px 22px rgba(22,163,74,.36); transform: translateY(-1px); color:#fff !important; }
.btn-outline-primary{ border-radius:12px !important; }

/* ---------- Inputs ---------- */
.form-control, .form-select, .custom-input, select.form-control, textarea.form-control{
  border-radius: 12px !important; border: 1.5px solid #e5e7eb !important; padding: 11px 14px; background:#fff;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus, .custom-input:focus{
  border-color: var(--mu-primary) !important; box-shadow: 0 0 0 4px rgba(255,107,0,.12) !important; outline: 0;
}

/* ---------- Product grid ---------- */
.main_product_inner, .category-product{
  display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px;
}
@media (max-width:1199px){ .main_product_inner, .category-product{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:767px){ .main_product_inner, .category-product{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }

.product_item{
  position: relative; background: var(--mu-card); border-radius: var(--mu-radius) !important;
  border: 1px solid var(--mu-line) !important; box-shadow: var(--mu-shadow);
  overflow: hidden; width: auto !important; max-width: 100%; margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product_item:hover{ transform: translateY(-4px); box-shadow: var(--mu-shadow-lg); }
.product_item .product_item_inner{ flex: 1 1 auto; display:flex; flex-direction:column; }
.product_item .pro_img{ position:relative; aspect-ratio: 1 / 1; overflow:hidden; background:#f3f4f6; }
.product_item .pro_img a{ display:block; height:100%; }
.product_item .pro_img img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.product_item:hover .pro_img img{ transform: scale(1.07); }
.product_item .pro_des{ padding: 12px 12px 4px; }
.product_item .pro_name a{
  color: var(--mu-ink); font-weight: 600; font-size: 14.5px; line-height: 1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height: 40px;
}
.product_item .pro_name a:hover{ color: var(--mu-primary); }
.product_item .pro_price{ padding: 0 12px 8px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.product_item .pro_price p, .product_item .pro_price span{ margin:0; }
.product_item .pro_price p{ color: var(--mu-primary); font-weight: 800; font-size: 17px; }
.product_item .pro_price del, .product_item .pro_price .old{ color: #9ca3af; font-size: 13px; font-weight: 500; }
.product_item .pro_btn{ padding: 0 12px 12px; margin-top:auto; display:flex; gap:8px; }
.product_item .pro_btn > *{ flex:1; }
.product_item .pro_btn a, .product_item .pro_btn button{
  display:block; text-align:center; padding: 9px 8px; font-size: 13.5px; width:100%;
  background: linear-gradient(135deg, var(--mu-primary), var(--mu-primary-dark)); color:#fff !important; border:0;
}
.product_item .rating, .product_item .pro_rating{ padding: 0 12px; font-size: 12px; color:#f59e0b; }
.sale-badge{ position:absolute !important; top:10px; left:10px; z-index:3; }
.sale-badge-text{
  display:inline-block; background: linear-gradient(135deg,#ef4444,#dc2626); color:#fff !important; border-radius: 999px;
  padding: 3px 10px; font-size: 11px; font-weight:700; line-height:1.3; box-shadow: 0 4px 10px rgba(239,68,68,.35);
}
.sale-badge-text p{ margin:0; display:inline; color:#fff; }
.sale-badge-inner, .sale-badge-box{ background:transparent !important; box-shadow:none !important; padding:0 !important; }

/* carousel cards keep a fixed rhythm */
.product_slider .product_item, .related_slider .product_item{ margin: 6px !important; }

/* ---------- Section headings ---------- */
.homeproduct{ padding: 28px 0; }
.homeproduct .section-title, .sec_title, .related-title{ font-weight: 800; letter-spacing:-.2px; }

/* ---------- Cart page ---------- */
.vcart-section{ padding: 28px 0 50px; }
.vcart-inner, .cart-summary{
  background: var(--mu-card); border-radius: var(--mu-radius); box-shadow: var(--mu-shadow); border:1px solid var(--mu-line); padding: 18px;
}
.vcart-inner .table{ margin:0; }
.vcart-inner .table thead th{ background:#f9fafb; border:0; font-size:13px; text-transform:uppercase; letter-spacing:.4px; color: var(--mu-muted); padding: 12px; }
.vcart-inner .table td{ vertical-align: middle; border-color: var(--mu-line); padding: 14px 12px; }
.vcart-inner .table img{ width:68px; height:68px; object-fit:cover; border-radius:12px; border:1px solid var(--mu-line); }
.cart_name a{ color: var(--mu-ink); font-weight:600; }
.qty-cart{ display:inline-flex; align-items:center; border:1.5px solid #e5e7eb; border-radius: 12px; overflow:hidden; background:#fff; }
.qty-cart .quantity{ display:inline-flex; align-items:center; }
.qty-cart .minus, .qty-cart .plus{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:#f9fafb; font-weight:700; }
.qty-cart .minus:hover, .qty-cart .plus:hover{ background: var(--mu-primary); color:#fff; }
.qty-cart input{ width:44px; text-align:center; border:0 !important; box-shadow:none !important; font-weight:600; padding:0; }
.remove-cart, .cart_remove{ color:#ef4444 !important; cursor:pointer; }
.cart-summary{ position: sticky; top: 90px; }
.cart-title{ font-weight:800; margin-bottom:14px; }
.coupon-form input{ border-radius: 12px 0 0 12px !important; }
.coupon-form button{ border-radius: 0 12px 12px 0 !important; }

/* ---------- Single product page ---------- */
.main-details-page{ padding: 24px 0 40px; }
.pro_details_area, .details_right{ background: var(--mu-card); border-radius: var(--mu-radius); box-shadow: var(--mu-shadow); border:1px solid var(--mu-line); padding: 20px; }
.details_slider .dimage_item img{ border-radius: var(--mu-radius); width:100%; }
.indicator_thumb .indicator-item{ border-radius: 10px; overflow:hidden; border:2px solid transparent; transition:border-color .2s; }
.indicator_thumb .owl-item.current .indicator-item, .indicator_thumb .indicator-item:hover{ border-color: var(--mu-primary); }
.details_right .pro_name, .details_right h1, .details_right .name{ font-weight:800; line-height:1.3; }
.details-price, .details_right .pro_price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.details-price p, .details_right .pro_price p{ font-size: 28px !important; font-weight:800; color: var(--mu-primary); margin:0; }
.product-details-discount-badge{ background:#fee2e2; color:#dc2626; border-radius:999px; padding:3px 12px; font-weight:700; font-size:12px; }
.selector-item_label, .size_inner label, .color_inner label{
  border-radius: 10px !important; border:1.5px solid #e5e7eb !important; padding: 7px 14px; cursor:pointer; transition: all .15s;
}
.selector-item_radio:checked + .selector-item_label{ border-color: var(--mu-primary) !important; background: rgba(255,107,0,.08); color: var(--mu-primary); font-weight:700; }
.pro-color .color_inner, .pro-size .size_inner{ gap:8px; display:flex; flex-wrap:wrap; }
.qty-cart.col-sm-12, .pro_unig{ margin: 14px 0; }
.pro_unig .add_cart_btn, .pro_unig .order_now_btn, .pro_unig .call_now_btn{ width:100%; padding: 13px 18px; font-size:16px; margin-top:8px; }
.call_now_btn{ border-radius:12px !important; }
.description-nav-ul li a, .desc-nav-ul li a{ border-radius: 10px 10px 0 0; font-weight:600; }
.related-product-section{ padding-top: 10px; }
@media (max-width:767px){
  .pro_details_area, .details_right{ padding: 14px; }
  .details-price p, .details_right .pro_price p{ font-size: 23px !important; }
}

/* ---------- Checkout (customer + reseller) ---------- */
.checkout-card{ background:#fff; border-radius: 16px !important; border:1px solid var(--mu-line) !important; box-shadow: var(--mu-shadow) !important; overflow:hidden; margin-bottom: 18px; }
.checkout-header{ display:flex; align-items:center; gap:10px; padding: 14px 18px !important; background: linear-gradient(135deg,#fff7ed,#fff) !important; border-bottom:1px solid var(--mu-line) !important; }
.checkout-header i{ color: var(--mu-primary); font-size:18px; }
.checkout-header h6{ margin:0; font-weight:800; }
.card-body-custom{ padding: 18px !important; }
.payment-options-list{ display:grid; gap:12px; }
.payment-option-label{ position:relative; display:block; cursor:pointer; margin:0; }
.payment-option-label input[type=radio]{ position:absolute; opacity:0; }
.payment-option-label .payment-content{
  display:flex; align-items:center; gap:14px; padding: 14px 16px; border:2px solid #e5e7eb; border-radius: 14px; background:#fff;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.payment-option-label:hover .payment-content{ border-color:#fdba74; }
.payment-option-label input:checked ~ .payment-content{ border-color: var(--mu-primary); background:#fff7ed; box-shadow: 0 0 0 4px rgba(255,107,0,.10); }
.payment-option-label .pay-logo{ height: 30px; width:auto; max-width:90px; object-fit:contain; }
.payment-option-label .pay-info strong{ display:block; font-size:15px; }
.payment-option-label .pay-info small{ color: var(--mu-muted); }
.payment-option-label .check-circle{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; border:2px solid #d1d5db; transition:all .2s; }
.payment-option-label input:checked ~ .check-circle{ border-color: var(--mu-primary); background: var(--mu-primary); box-shadow: inset 0 0 0 4px #fff; }
.btn-place-order{ width:100%; padding: 15px 20px !important; font-size: 17px !important; display:flex; align-items:center; justify-content:center; gap:10px; border:0; }
.mobile-submit-btn{ position: sticky; bottom: 0; background: rgba(255,255,255,.95); backdrop-filter: blur(6px); padding: 10px 0; z-index: 20; }

/* ---------- Header / misc polish ---------- */
.mobile-menu, .mobile_bottom_nav, .nav_item{ transition: color .2s; }
.breadcrumb-section, .custom-breadcrumb{ background: transparent; }
.card, .modal-content{ border-radius: var(--mu-radius); border:1px solid var(--mu-line); }
.pagination .page-link{ border-radius: 10px !important; margin: 0 3px; border:1px solid var(--mu-line); color: var(--mu-ink); }
.pagination .active .page-link{ background: var(--mu-primary); border-color: var(--mu-primary); color:#fff; }
table{ border-radius: 12px; }

/* skeleton-friendly fast image rendering */
.pro_img img, .dimage_item img{ content-visibility: auto; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* small cart icon button inside product cards */
.product_item .pro_btn .cart-icon-btn, .product_item .pro_btn .cart-icon-link{ flex: 0 0 46px !important; width:46px !important; padding:9px 0 !important; }