/*=====*******PRODUCT COMMON CSS*******=====*/

/* One source of truth for the glyphs inside the 44x44 card action buttons
   (quick view eye, wishlist heart). Sizes the glyph only — the 44px targets
   are set independently and must not be derived from this. */
:root {
  --card-icon-size: 18px;
}

.product .slick-track>li {
  padding: 0px 15px;
}

/* .prod-img{background: #fff;min-height: 341px;border-radius: 7px 7px 0 0;overflow: hidden;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;margin-bottom: 10px;box-shadow: 0px 0px 12px rgb(0 0 0 / 2%);transition: 0.5s linear;-webkit-transition: 0.5s linear;-o-transition: 0.5s linear;-moz-transition: 0.5s linear; } */
.prod-img {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0px;
  align-items: center;
  margin-bottom: 5px;
  transition: 0.5s linear;
  -webkit-transition: 0.5s linear;
  width: 100%;
}

.prod-img-featured-main {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0px;
  align-items: center;
  margin-bottom: 10px;
  transition: 0.5s linear;
  -webkit-transition: 0.5s linear;
  width: 100%;
  object-fit: cover;
  height: 600px;
}

.product_gray .product .prod-img {
  background: #F8F8F8;
}
.prod-title {
    font-style: normal;
    font-weight: 600;
    text-transform: capitalize;
    font-size: 13px;
    display: block;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    color: #000;
    min-height: 36px;
    height: auto;
    line-height: 18px;
    margin-bottom: 5px !important;
}

.product .rating {
  margin: 10px 0 !important;
  color: #7b7b7b !important;
  font-size: 14px;
  font-weight: 300;
}

.product .price {
  font-style: normal;
  font-weight: 600;
  color: #108474;
  font-size: 15px;
  line-height: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: start;
  gap: 5px;
}

.product .price .offer {
  font-size: 12px;
  color: #626ABB;
  font-weight: 500;
  line-height: 100%;
  padding-left: 25%;
}

.product-box {
  height: 100%;
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
}

/* HOVRE*/
.prod-img>img {
  width: 100%;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  height: auto;
  aspect-ratio: 2/3;
  object-fit: contain;
}

.product-box:hover .prod-img>img {
  transform: scale(1.1)
}

.product-box:hover .quickview {
  display: block !important;
  transition: all 2s linear;
}

.product-box:hover .floating-bar {
  display: block;
  transition: all 2s linear;
}

/* .product-box:hover {border: 1px solid #000} */
.product .modeltext {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 22px;
  color: #7b7b7b;
  text-transform: uppercase;
  line-height: normal;
  margin: 15px 0 0px !important;
}

.product-box-featured-main {
  padding-bottom: 10px;
  position: relative;
  background: #fff;
  box-shadow: 0px 0px 12px rgb(0 0 0 / 5%);
  border-radius: 10px;
}

.product-box-featured-main:hover .prod-img-featured-main>img {
  transform: scale(1.7)
}

.quickview {
  position: absolute;
  width: 100%;
  padding: 5px;
  display: none !important;
  bottom: 29%;
}

.quickviewtext {
  text-align: center;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  padding: 2px;
}

.quickviewtext:hover {
  color: #FFFFFF
}

.floating-add-to-cart {
  text-align: center;
  width: 34px;
  position: absolute;
  left: 82%;
  top: 4%;
  height: 34px;
  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 50px;
}

.floating-wishlist {
  width: 34px;
  position: absolute;
  left: 82%;
  top: 15%;
  height: 34px;
  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 50px;
}

.floating-bar {
  display: none;
}

.fill-wishlist {
  background: #005071;
  border: 1px solid #FFFFFF;
}

.floating-wishlist .fa-heart {
  font-size: 14px;
  color: #FFFFFF;
}

.price-range span {

  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #536372;
}

.price-range input {
  background: #F2F2F2;
  border-radius: 5px !important;
  height: 35px !important;
}

.price-range-button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 10px 15px;
	gap: 15px;
	height: 36px;
	border: 0;
	width: 100%;
	background: #E5E5E5;
	border-radius: 5px;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;
	color: #000;
}
/* cat circle*/
.cate-img {
  text-align: center;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
  height: 210px;
}

/* .cate-img:before{content: "";position: absolute;bottom: -89px;left:0;right:0;margin:0 auto;width: 218px;height: 218px;border-radius: 100%;z-index: -1;transition: 0.3s linear;-webkit-transition: 0.3s linear;-o-transition: 0.3s linear;-moz-transition: 0.3s linear; } */
/* .cate-img:before {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    z-index: -1;
    transition: 0.3s linear;
    -webkit-transition: 0.3s linear;
    -o-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    background: rgb(255 255 255 / 100%);
} */
/* .cate-img.gray-circle:before{background: rgb(98 106 187 / 13%);} */
.cate-img.gray-circle:before {}

.cate-img.red-circle:before {
  background: rgb(205 29 92 / 10%);
}

.cate-img.purple-circle:before {
  background: rgb(41 0 203 / 10%);
}

.cate-img.green-circle:before {
  background: rgb(24 200 52 / 10%);
}

/* brand circle*/
.brand-img {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
}

.brand-img:before {
  content: "";
  position: absolute;
  bottom: -89px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 230px;
  height: 230px;
  border-radius: 100%;
  z-index: -1;
  transition: 0.3s linear;
  -webkit-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
}

.brand-img.gray-circle:before {
  background: rgb(98 106 187 / 13%);
}

.brand-img.red-circle:before {
  background: rgb(205 29 92 / 10%);
}

.brand-img.purple-circle:before {
  background: rgb(41 0 203 / 10%);
}

.brand-img.green-circle:before {
  background: rgb(24 200 52 / 10%);
}

.priceTxt {
  font-size: 18px !important;
  color: #626ABB !important;
  line-height: 100%;
  font-weight: 500;
  font-family: "Jost"
}

/*HOVER*/
.catebox:hover .cate-img.gray-circle:before {
  background: rgb(255 255 255 / 48%);
}

.catebox:hover .cate-img.red-circle:before {
  background: hsl(339deg 75% 46% / 28%);
}

.catebox:hover .cate-img.purple-circle:before {
  background: rgb(41 0 203 / 28%);
}

.catebox:hover .cate-img.green-circle:before {
  background: rgb(24 200 52 / 28%);
}

/* BADGE*/
.latest-badge {
  position: absolute;
  top: 10px;
  left: 5%;
  color: #fff;
  background: #000000;
  padding: 3px 6px;
  box-shadow: 0px 3px 30px rgba(18, 21, 51, 0.07);
  min-width: 71px;
  text-align: center;
  border-radius: 3px;

  font-style: normal;
  font-weight: 400;
  font-size: 12px;
}

.out-stock {
  background: #f2f1f1;
  color: #000;
}

.discount-badge {
  background: #127C3E;
}

.trending-badge {
  background: #0AB97A;
}

/* Contrast fix (WCAG AA): white text on this light green was ~2.5:1.
   Dark text (#111827) restores legibility without changing the badge colour. */
.trending-badge {
  color: #111827;
}

/* Discount tag: white on green #127C3E = 5.28:1 (AA). The lighter brand greens
   (#03b983, #00A651) fail with white text, so this darker green is used. */
.discount-badge {
  color: #fff;
}

/* Pre-order badge — amber, deliberately distinct from the greens/grey, with a
   1px edge so it holds 3:1 over any product photo (WCAG 1.4.11). 7.09:1 text. */
.pre-order-badge {
  background: #92400E;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* "Ships by <date>" note under the Pre Order button. #374151 on white = 10.31:1. */
.ships-by-note {
  color: #374151;
  font-size: 13px;
  margin-top: 8px;
}

.ships-by-note .fa-truck {
  margin-right: 5px;
}

/* Pre Order button reuses the add-to-cart shape but in the amber pre-order colour. */
.add-to-cart.pre-order {
  background: #92400E;
  border-color: #92400E;
  color: #fff;
}

/* WISHLIST*/
.add-to-wishlist {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 33px;
  height: 33px;
  border-radius: 100%;
  color: #626ABB;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.add-to-wishlist:hover {
  background: #626ABB;
  color: #fff;
}

.add-to-wishlist:hover i.fa-heart-o:before {
  content: "\f004 "
}

.wishlist-empty i.fa-heart-o {
  color: #005071;
  font-size: 16px;
}

.add-to-wishlist-fill {
  background: #626ABB;
  color: #fff;
  position: absolute;
  top: 10px;
  right: 20px;
  width: 33px;
  height: 33px;
  border-radius: 100%;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.add-to-wishlist-fill i.fa-heart-o:before {
  content: "\f004 "
}

.btn-add-to-wishlist {
  background: #e9e9e9;
  border-radius: 100px;
  padding: 8px 15px;
  font-size: 14px;
  color: #000;
  border: none;
  outline: none;
  align-items: center;
}

.wishlist-empty {
  background: #FFFFFF;
  color: #005071;
}

.wishlist-empty:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  background: #005071;
  z-index: -1;
  transition: 0.3s linear;
  -webkit-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
}

.wishlist-empty:hover:before {
  width: 100%;
  height: 100%;
}

.wishlist-empty:hover {
  color: #FFF;
}

.wishlist-empty:hover i {
  color: #FFF;
}

.btn-share {
  background: #e9e9e9 !important;
  border-radius: 100px;
  padding: 8px 15px;
  font-size: 14px;
  color: #000;
  border: none;
  outline: none;
  align-items: center;
  margin: 0 !important;
}

/*RATING*/
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.rating li {
  font-size: 18px;
  color: rgb(118 119 135 / 40%);
  line-height: 100%;
  padding: 0 3px;
}

.rating li:nth-child(-n+4) {
  color: #FFCE1F;
}


/* QUANTITY */
.quantitybox input[type='number'] {
  -moz-appearance: textfield;
}

.quantitybox {
  clear: initial;
  margin: 0px;
  display: inline-block;
  overflow: hidden;
  height: 46px;
  width: 20%;
  background: #f7f7f8;
  border-radius: 4px;
  position: relative;
}

.value-button {
  font-size: 16px;
  height: 19px;
  width: 32px;
  line-height: 100%;
  text-align: center;
  color: #536372;
  background: #f7f7f8;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

.value-button.increase {
  top: inherit;
}

.value-button.decrease {
  top: inherit;
  left: 0
}

.value-button i {
  font-weight: bold;
  color: #536372
}

.quantitybox .quantity {
  color: #000;
  font-size: 18px;
  font-weight: 500;
  width: 50px;
  text-align: center;
  height: 38px;
  border-radius: 0;
  position: inherit;
  opacity: 1;
  cursor: pointer;
}

.product_varient_item label {
  font-size: 16px;
  font-weight: 500;
  color: #3c3c3f;
  margin: 0 0 8px;
  display: block;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  line-height: 100%;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.quantity .qty {
  width: 48px;
  border: 0;
  height: 38px;
  text-align: center;
  background: #f7f7f8
}

/*BUTTTON*/
.prod-add {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.add-to-cart {
  background: #F8F8F8;
  border-radius: 5px;
  border: 1px solid #626ABB;
  color: #626ABB;
  font-size: 16px;
  line-height: 100%;
  font-weight: bold;
  display: inline-flex;
  padding: 14px 15px;
  min-width: 65%;
  position: relative;
  align-items: center;
  text-align: center;
  justify-content: center;
  box-shadow: 0px 5px 7px rgb(0 0 0 / 11%);
  z-index: 1;
  overflow: hidden;
}

.add-to-cart:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  background: #02ba83;
  z-index: -1;
  transition: 0.3s linear;
  -webkit-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
}

.add-to-cart:hover:before {
  width: 100%;
  height: 100%;
}

.add-to-cart:hover {
  color: #fff;
}

.buy-now {
  border: 1px solid #02ba83 !important;
  color: #fff !important;
}

.buy-now:before {
  background: #02ba83 !important;
}

.buy-now:hover:before {
  width: 100%;
  height: 100%;
}

.buy-now:hover {
  color: #fff;
}

/* PRODUCT GRID*/
.product-gird .product {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  row-gap: 30px;
}

.prod-grid-col3>li {
  width: 33.33%;
  padding: 0 15px;
  margin-bottom: 20px;
}

.prod-grid-col4>li {
  width: 25%;
  padding: 0 8px;
  margin-bottom: 0px;
}

.prod-grid-col5>li {
  width: 20%;
  padding: 0 8px;
  margin-bottom: 0px;
}

/* .product-gird .prod-img{box-shadow: 0px 0px 12px rgb(0 0 0 / 5%);} */

/* PRODUCT LIST*/
.product-list .product {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  background: #000;
  text-align: center;
  margin-bottom: 30px;
}

.prod-grid-list>li {
  width: 33.33%;
  padding: 0 15px;
  margin-bottom: 30px;
}

.product-list .prod-img {
  box-shadow: 0px 0px 12px rgb(0 0 0 / 5%);
  height: 228px;
}

.product-list .product-detail-div {
  background: #ccc;
  justify-content: center;
  display: flex;
  align-content: center;
  align-items: center;
}

.product-padding {
  padding: 15px 15px 10px;
}

/* PAGINATION */
.pagination {
  display: flex;
  justify-content: end;
}

.pagination li {
  padding: 0 7px;
}

.pagination li a {
    border: none;
    color: #9e9e9e;
    padding: 8px;
}

.pagination li.page-item.disabled span.page-link {
    border: none;
    color: #9e9e9e;
    padding: 8px;
}
.pagination li a i {
  font-weight: bold;
}
.pagination li.page-item.active span.page-link {
    background: none;
    border: none;
    color: #00a651;
    padding: 8px;
    width: unset;
    height: unset;
}
.pagination li:nth-last-child(1) a.page-link {
    color: #000;
}
.pagination li.page-item a:hover {
    color: #00a651;
    background: none;
    outline: none;
    border: none;
}
.pagination li a:hover,
.pagination li a.current-page {
  background: #626ABB;
  color: #fff;
}

.notfoundtxt {
  text-align: center;
}
.pagination_gl {
    padding-top: 30px;
    border-top: 1px solid #eaeaea;
}

/* CHECK BOX*/
/* The container */
.check-label {
  display: block;
  position: relative;
  padding-left: 40px;
  /* margin-bottom: 10px; */
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #000;
  font-weight: normal;
}

/* Hide the browser's default checkbox */
.check-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  left: 0;
  width: 10px;
  height: 10px;
  top: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 1px solid #767787;
  border-radius: 2px;
}

.checkmark-round {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: transparent;
  border: 1px solid #767787;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When the checkbox is checked, add a blue background */
.check-label input:checked~.checkmark {
  background-color: transparent;
  border-color: #626ABB;
}

.check-label input:checked~.checkmark-round {
  background-color: #005071;
  border-color: #fff;
  color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.product-count-text {

  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: #000;
}

/* Show the checkmark when checked */
.check-label input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.check-label .checkmark:after {
  left: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
  background: #626ABB;
  border-radius: 2px;
}

/*================CHECKOUT================*/
.checkout-wrapper {
  margin-bottom: 70px;
}

.delivery-blk {
  width: 700px;
  padding-right: 20px;
}

.ordersummary-blk {
  width: calc(100% - 700px);
}

.delivery-dtail {
  position: relative;
  max-width: 1000px;
  overflow-x: hidden;
  overflow-y: hidden;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 7px;
  padding: 15px 25px;
  background: #f7f7f8;
  border: 1px solid rgba(0, 0, 0, .125);
}

.add-selection {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.paddles {}

.address-box {
  border: 1px solid rgb(18 21 51 / 20%);
  background: #ffffff;
  border-radius: 7px;
  padding: 15px;
  position: relative;
}
.address-box p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: #000;
    max-width: 293px;
    word-break: break-all;
    line-height: normal;
}

.add-selection {
  margin: 0 -4px;
}

.add-selection li {
  padding: 0 7px;
}

.edit-add {
  font-size: 16px;
  color: #FFF !important;
  line-height: 100%;
}

.add-new-address {
  background: #F8F8F8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.address-check .check-label {
  margin-bottom: 0;
  font-size: 14px;
  color: #767787;
  line-height: 100%;
  font-weight: normal;
  text-align: right;
  padding: 0 25px 0 0;
  margin-top: 5px;
}

.address-check .checkmark {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  border: 1px solid rgb(18 21 51 / 20%);
  right: 0;
  left: inherit;
}

.address-check .check-label input {
  right: 0;
  left: inherit;
}

.address-check .checkmark:after {
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.address-check .check-label input:checked~.checkmark {
  background-color: #00a651;
}

.add-new-address p {
  font-size: 16px;
  color: #767787;
  line-height: 24px;
  width: 100%;
  text-align: center;
}

.payment-metthod {
  border: 1px solid #E6E9EB;
  border-radius: 7px;
  padding: 35px 30px;
}

.payment-wrapper {
  display: flex;
  flex-wrap: wrap;
}

/* Radio button */
.radio-wrapper {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #000;
  font-weight: normal;
}

/* Hide the browser's default radio button */
.radio-wrapper input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  left: 0;
}

/* Create a custom radio button */
.radio-wrapper .checkmark {
  border-radius: 50%;
}

/* When the radio button is checked, add a blue background */
.radio-wrapper input:checked~.checkmark {
  background-color: #fff;
  border-color: #000;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-wrapper input:checked~.checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-wrapper .checkmark:after {
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #626ABB;
}

.payment-info {
  padding-right: 30px;
}

.pay-card {
  padding-right: 15px;
}

.card-list {
  display: flex;
}

.card-list li {
  padding: 0 7px;
}

.card-box {
  position: relative;
}

.card-box .radio-wrapper {
  position: absolute;
  top: -10px;
  right: 0;
}

.card-box .checkmark {
  border: 3px solid transparent;
}

.card-box .radio-wrapper input:checked~.checkmark {
  border-color: #fff;
}

.card-box .radio-wrapper .checkmark:after {
  left: 4px;
  top: 2px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 0;
}

.card-box .radio-wrapper input:checked~.checkmark {
  background: #626ABB;
}

.summary-detail {
  background: #f7f7f8;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 7px;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.ordersummary-blk .heading-md {
  margin-left: 20px;
}

.order__subtotal__table {
  border-collapse: collapse;
  padding: 0 20px;
  width: 90%;
  margin: 0 auto;
}

.order__subtotal__table tbody {}

.order__subtotal__table tbody tr td {
  font-size: 16px;
  color: #000;
  font-weight: normal;
  text-align: left;
  padding: 6px 3px;
  vertical-align: top;
}

.order__subtotal__table tbody tr:not(:last-child) {
  border-bottom: 1px solid rgb(18 21 51 / 10%);
}

.order__subtotal__table tbody tr td.thumb-price {
  color: #000;
  width: 65px;
  font-weight: 500;
}

.order__subtotal__table tbody tr td.tumb-img {
  width: 50px;
}

.order__subtotal__table tbody tr td.thumb-quntity {
  width: 105px;
}

.total-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.summary-total {
  border-top: 1px solid rgb(18 21 51 / 10%);
  padding-top: 10px;
}

.summary-title,
.summary-price {
  line-height: 100%;

  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 40px;
  color: #000;
}

.summary-price {
  color: #767787;
}

.discount-box .summary-title,
.discount-box .summary-price {
  color: #FF4848;
}

.grand-total .summary-title,
.grand-total .summary-price {
  font-size: 22px;
  color: #000;
  font-weight: 500;
}

.summary-total li {
  padding: 0px 20px;
}

.button-place {
  width: 100%
}

.paddle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3em;
}

.left-paddle {
  left: 0;
}

.right-paddle {
  right: 0;
}

/*
.product-gird .product {
    display: grid;
    grid-template-columns: auto auto auto auto;
    row-gap: 40px;
    column-gap: 30px;
}
.product-gird .product li {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}
.product-gird .product li a.prod-img {
    height: 298px;
    width: 100%;
} */
/*=====******* MEDIA QUERY *******=====*/
@media screen and (max-width: 1499px) {

  /* .prod-title {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .product .price {
    font-size: 20px;
  } */

  .latest-badge {
    font-size: 14px;
    min-width: 60px;
    padding: 5px 8px;
  }

  .product-gird .add-to-cart {
    min-width: 125px;
  }

  /*	CHECKOUT */
  .delivery-blk {
    width: 720px;
  }

  .ordersummary-blk {
    width: calc(100% - 720px);
  }

  .add-selection li:last-child,
  .pay-add-new {
    width: 100%;
  }

  .add-selection {
    flex-wrap: wrap;
  }

  .add-selection li {
    width: 50%;
    margin-bottom: 15px;
  }

  .address-box {
    min-width: 280px;
  }

  .payment-info {
    padding-right: 0;
    width: 100%;
    margin-bottom: 20px;
  }

  .payment-list {
    display: flex;
    flex-wrap: wrap;
  }

  .payment-list li {
    width: 50%;
  }

  .pay-card {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .card-list {
    margin: 0 -7px;
  }
}

@media screen and (max-width: 1199px) {
  .paddles {
    display: none;
  }

  .address-box {
    padding: 15px;
    min-width: 240px;
  }

  .address-box p {
    font-size: 16px;
    line-height: 22px;
    max-width: 200px;
      word-break: break-all;
    line-height: normal;
  }

  .delivery-blk {
    width: 600px;
    padding-right: 30px;
  }

  .ordersummary-blk {
    width: calc(100% - 600px);
  }

  .delivery-dtail {
    padding: 25px;
  }

  /*	SUMMARY */
  .order__subtotal__table tbody tr td {
    font-size: 14px;
  }

  .grand-total .summary-title,
  .grand-total .summary-price {
    font-size: 18px;
  }

  .summary-title,
  .summary-price {
    font-size: 16px;
  }

  .summary-total li {
    padding: 8px 20px;
  }

  .order__subtotal__table tbody tr td.thumb-quntity {
    width: 58px;
  }

}

@media screen and (max-width: 991px) {
  .paddles {
    display: none;
  }


  .product .modeltext {
    margin: 15px 0 0px !important;
  }

  .product .rating {
    margin: 5px 0 !important;
  }

  .quantitybox {
    height: 40px;
  }

  /*	CHECKOUT */
  .delivery-blk {
    width: 100%;
    padding-right: 0;
  }

  .ordersummary-blk {
    width: 100%;
  }

}

@media screen and (max-width: 767px) {
  .paddles {
    display: none;
  }

  .address-box {
    min-width: auto;
    padding: 20px 10px 10px;
  }

  .add-selection {
    margin: 0 -3px;
  }

  .add-selection li {
    padding: 0 3px;
  }

  .address-box p {
    max-width: 100%;
    font-size: 14px;
      word-break: break-all;
    line-height: normal;
  }

  .edit-add {
    top: 7px;
    right: 7px;
    font-size: 14px;
  }

  .radio-wrapper {
    font-size: 16px;
    padding-left: 28px;
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 575px) {
  .paddles {
    display: none;
  }

  .prod-add {
    margin-top: 15px;
  }

  .pagination li a {
    font-size: 15px;
  }

  .product-gird .add-to-cart {
    min-width: 110px;
  }

  .product-gird .product {
    margin: 0 -8px;
  }

  .prod-grid-col3>li {
    width: 100%;
    padding: 0 8px;
    margin-bottom: 30px;
  }

  .prod-grid-col3 .quantitybox .quantity {
    padding: 0 2px;
  }

  .prod-grid-col4>li {
    width: 100%;
    padding: 0 8px;
    margin-bottom: 30px;
  }

  .prod-grid-col4 .quantitybox .quantity {
    padding: 0 2px;
  }

  .prod-grid-col5 .quantitybox .quantity {
    padding: 0 2px;
  }


  .product .price .offer {
    font-size: 14px;
  }

  .checkmark {
    height: 13px;
    width: 13px;
  }

  .radio-wrapper .checkmark:after {
    top: 1.5px;
    left: 1.7px;
    width: 7px;
    height: 7px;
  }

  .add-new-address p {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  .paddles {
    display: none;
  }

  .cate-img:before {
    width: 220px;
    height: 220px;
    bottom: -26px;
  }

  .product-gird .add-to-cart {
    min-width: 90px;
    padding: 10px 8px;
  }

  .prod-grid-col3>li {
    width: 100%;
    padding: 0 8px;
    margin-bottom: 30px;
  }

  .prod-grid-col4>li {
    width: 100%;
    padding: 0 8px;
    margin-bottom: 0px;
  }

  .quantitybox {
    width: 110px;
  }

  .delivery-dtail,
  .payment-metthod {
    padding: 15px;
  }

  .add-selection li,
  .pay-add-new {
    width: 100%;
  }

  .address-box {
    min-height: auto;
  }

  .add-new-address {
    max-width: 100%;
    min-height: auto;
  }

  .add-new-address>img {
    margin-bottom: 10px;
  }

  .add-selection li:last-child {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 375px) {
  .paddles {
    display: none;
  }

  .prod-grid-col3>li {
    width: 100%;
    padding: 0 8px;
    margin-bottom: 30px;
  }

  .prod-grid-col4>li {
    width: 100%;
    padding: 0 8px;
    margin-bottom: 0px;
  }

  .address-box p {
    font-size: 12px;
    line-height: 18px;
      word-break: break-all;
    line-height: normal;
  }

  .address-check .check-label {
    font-size: 12px;
  }

}

@media screen and (max-width: 360px) {
  .paddles {
    display: none;
  }

  .radio-wrapper {
    font-size: 12px;
    padding-left: 16px;
    margin-bottom: 10px;
  }

  .order__subtotal__table tbody tr td.tumb-img {
    width: 40px;
  }

  .order__subtotal__table tbody tr td.thumb-quntity {
    width: 52px;
  }

}

.clockdiv {
  font-family: sans-serif;
  color: #767787;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 16px;
}

.clockdiv>div {
  background: #005071;
  display: inline-block;
}

.clockdiv div>span {

  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  text-transform: capitalize;
  color: #FFFFFF;
}

.smalltext {
  padding-top: 2px;

  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #F2F2F2;
}

.panel-box .heading-md{
  border-bottom: 1px solid #ddd;
}

.shop-col{
  margin-bottom: 50px;
}


/* Full titles wrap to 2-4 lines, so pin rating + price to the card bottom
   to keep those rows aligned across every card in a row */
.product-box {
  display: flex;
  flex-direction: column;
}

.product-box .product_con,
.product-box > .mx-2.mb-3.mt-4 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.product-box .product-detail {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* the flexible gap sits after the title only — rating and price keep
   their normal spacing and move down together as one group */
.product-box .product-detail .prod-title {
  margin-bottom: auto !important;
}

.product-box .product-detail .rating {
  margin-bottom: 3px !important;
}

/* Equal-height slides so the home/related carousels align the same way.
   slick.css centres its slides (align-items: center), which lets cards with
   different title lengths drift up and down and knocks the rating/price rows
   out of line. Override it for the product carousels only so the brand,
   category and thumbnail sliders keep their centred layout. */
.product.slick-slider .slick-track {
  display: flex;
  align-items: stretch;
}

.product.slick-slider .slick-track > li {
  height: auto;
  float: none;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* the slide is what the stretch lands on, so the card has to fill it —
   flex rather than height:100% so any margin on the card is accounted for */
.product.slick-slider .slick-track > li > .product-box {
  flex: 1 1 auto;
}

/* ── Product card action row ─────────────────────────────────────────────
   ADD TO CART, full width at the bottom of every listing card. Quick view
   is a puck under the wishlist heart (see below).
   Replaces the old hover-only overlay, which was unreachable by keyboard
   and invisible on touch. Scoped with :has() so the home carousels, which
   share .product-box, keep their current layout. */
.product-box:has(.card-actions) {
  display: flex;
  flex-direction: column;
}

/* Pushes the row to the bottom so buttons line up across a row of cards
   whose titles wrap to different heights. */
.card-actions {
  margin-top: auto;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.card-actions .btn-add-to-cart,
.card-actions .btn-sold-out {
  /* min-height, not height: "ADD TO CART" wraps at 200% zoom and must not clip */
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* White on #1F2937 = 14.68:1 (AA + AAA) */
.card-actions .btn-add-to-cart {
  flex: 1 1 auto;
  background: #1F2937;
  color: #FFFFFF;
  padding: 6px 10px;
  text-align: center;
}

.card-actions .btn-add-to-cart:hover {
  background: #111827;
  color: #FFFFFF;
}

/* White on #6B7280 = 4.83:1 (AA). Not dimmed with opacity, which would drop
   the real contrast below that. */
.card-actions .btn-sold-out {
  flex: 1 1 auto;
  background: #6B7280;
  color: #FFFFFF;
  padding: 6px 10px;
  cursor: not-allowed;
  opacity: 1;
}

/* common.css has a blanket `:focus { outline: 0 }` that beats the UA ring, so
   the indicator has to be put back explicitly. The ring sits in the white gap
   outside the button — on the dark face it would only reach 1.67:1. */
.card-actions .btn-add-to-cart:focus-visible,
.card-actions .btn-sold-out:focus-visible {
  outline: 3px solid #005071;
  outline-offset: 2px;
}

.card-actions .btn-add-to-cart:focus:not(:focus-visible),
.btn-quickview:focus:not(:focus-visible) {
  outline: none;
}

/* ── Wishlist heart ──────────────────────────────────────────────────────
   Listing cards drop the old .floating-bar wrapper entirely and anchor the
   heart to .product-box (position:relative since line 84). That leaves the
   .floating-bar rules alone for the home carousels, which still use the old
   markup, and sidesteps the fact that opacity cannot override display:none.

   The button IS the target. Previously the target was the inner anchor, a
   content-sized flex item that shrank to roughly the width of the glyph in
   the filled state — the heart used to remove an item was the smaller one. */
.wish-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  /* common.css pins .floating-wishlist with `left: 76% !important` inside a
     max-width query; without this the heart slides back toward the middle on
     small screens. */
  left: auto !important;
  z-index: 3;

  /* 40px to match the quick view puck; clears the 24px AA target minimum. */
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;

  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 50%;
  /* After `font: inherit` above, which would otherwise reset it. */
  font-size: var(--card-icon-size);
  /* #017954 on the white puck = 5.43:1 */
  color: #017954;

  /* Explicit, because common.css sets `a, button { transition: all .5s }` —
     left alone the reveal lags half a second behind focus. */
  transition: opacity 150ms ease-out;
}

/* Quick view, stacked under the heart: 10px + 40px + 8px gap. Borrows the
   heart's puck, reveal and focus ring below so the two read as one set.
   Eye in the heart's green: #017954 on the white puck = 5.43:1. Glyph is
   smaller than the heart's. 40px clears the 24px AA target minimum. */
.btn-quickview {
  position: absolute;
  top: 58px;
  right: 10px;
  z-index: 2;

  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
  cursor: pointer;

  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 50%;
  font-size: 15px;
  color: #017954;
  transition: opacity 150ms ease-out;
}

/* White on #017954 = 5.43:1 */
.btn-quickview:hover {
  background: #017954;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* The older .floating-wishlist rule above paints the glyph white and pins it to
   14px, which worked while the heart only ever appeared on the dark filled puck.
   The resting state is a white puck now, so colour and size come from the button
   (equal specificity, so this wins on source order). */
.wish-toggle .fa-heart {
  font-size: inherit;
  color: inherit;
}

/* Filled = in the wishlist. #017954 is the brand green #02BA83 at the same
   hue, walked down in lightness until it carries contrast:
     puck on the white card = 5.43:1  (needs 3:1 as a UI component)
     white glyph on the puck = 5.43:1
   Rejected: #02BA83 2.51:1, #22B569 2.66:1 both fail; #00A651 is 3.19:1,
   passing with too little headroom to build on.
   The white border earns its keep — the puck sits over arbitrary cover art,
   and that ring is what separates it from a dark book jacket. */
.wish-toggle.fill-wishlist {
  background: #017954;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* Hover-reveal. Visible-and-operable is the base state and hiding is the
   enhancement, applied only where a hover-capable fine pointer is proven.
   Written the other way round as `@media (hover: none)` it would fail closed:
   any device not matching the query would hide the heart with no way back. */
@media (hover: hover) and (pointer: fine) {
  .wish-toggle,
  .btn-quickview {
    opacity: 0;
    /* Without this an invisible but live 44px target sits on the cover art,
       and a tap opens the wishlist instead of the product. */
    pointer-events: none;
  }

  .product-box:hover .wish-toggle,
  .product-box:hover .btn-quickview {
    opacity: 1;
    pointer-events: auto;
  }

  /* :focus-visible, not :focus, and not the parent's :focus-within. A mouse
     click focuses the button, and either of those then holds the heart open on
     that card until the user clicks elsewhere — it would not even go away when
     the pointer left. :focus-visible is the browser's own "this focus came
     from the keyboard" answer, and the ring below tracks the same signal, so
     there is never a focused-but-unindicated state. */
  .wish-toggle:focus-visible,
  .btn-quickview:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Tabbing anywhere in the card surfaces the heart before focus reaches it.
     Kept as its own rule on purpose: an engine without :has() drops this block
     alone, rather than invalidating the two rules above along with it. */
  .product-box:has(:focus-visible) .wish-toggle,
  .product-box:has(:focus-visible) .btn-quickview {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wish-toggle,
  .btn-quickview {
    transition: none;
  }
}

/* opacity is not among the properties forced-colors overrides, so the heart
   would stay hidden for users who most need it visible. */
@media (forced-colors: active) {
  .wish-toggle,
  .btn-quickview {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Double ring: no single colour survives arbitrary cover art. White spacer
   from box-shadow, dark ring from outline — that order matters, because
   forced-colors drops box-shadow but keeps and recolours outline. */
.wish-toggle:focus-visible,
.btn-quickview:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #FFFFFF;
}

/* A real element rather than ::after: generated content lands in the
   accessibility tree, so attr() content would fold into the button's name.
   aria-hidden in the markup because it repeats the aria-label. */
.wish-tip {
  position: absolute;
  /* Flush against the left of the puck: below it now sits the quick view
     button. Any dead gap between the two and the tooltip vanishes when the
     pointer crosses it. */
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-top: 0;
  padding: 4px 8px;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 4px;
  background: #1F2937;
  color: #FFFFFF;
  opacity: 0;
  /* Only while hidden. On a visible tooltip this would let the pointer fall
     through the overhang onto the image, dropping hover and hiding it. */
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

.wish-toggle:hover .wish-tip,
.wish-toggle:focus-visible .wish-tip {
  opacity: 1;
  pointer-events: auto;
}

.wish-toggle.tip-dismissed .wish-tip {
  opacity: 0;
  pointer-events: none;
}

/* ── Cart quantity stepper ───────────────────────────────────────────────
   Replaces ADD TO CART once the product is in the cart. Only rendered when
   the product sits on exactly one cart row with no variant options.

   Contrast against the white card: border #017954 5.43:1, glyphs and count
   #1F2937 14.68:1, capped plus #6B7280 4.83:1, focus ring #005071 8.80:1 —
   all clear the 3:1 needed for a UI component, and the count clears 4.5:1
   as text.

   Targets are 36x44. The AA floor (SC 2.5.8) is 24x24; 44x44 is the AAA
   figure and two of them plus the count will not fit the ~105px a 6-up
   carousel card leaves. */
.card-actions {
  container-type: inline-size;
  container-name: card-actions;
}

.qty-stepper {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 44px;
  border: 1.5px solid #017954;
  border-radius: 22px;
  background: #FFFFFF;
  /* No overflow:hidden — it would clip the inset focus rings. */
}

.qty-stepper__btn {
  flex: 0 0 36px;
  min-width: 32px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #1F2937;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.qty-stepper__btn:first-child { border-radius: 22px 0 0 22px; }
.qty-stepper__btn:last-child { border-radius: 0 22px 22px 0; }

.qty-stepper__btn:hover { background: #F3F4F6; }

/* Inset: the pill is only 44px tall, so an outset ring would collide with
   the card edge. */
.qty-stepper__btn:focus-visible {
  outline: 2px solid #005071;
  outline-offset: -2px;
}

.qty-stepper__glyph {
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  fill: none;
  pointer-events: none;
}

/* At the stock ceiling. Colour-shifted rather than dimmed with opacity: the
   button still takes focus and still explains itself when pressed, so it is
   an active control and the contrast minimum still applies to it. */
.qty-stepper__btn[aria-disabled="true"] {
  color: #6B7280;
  cursor: not-allowed;
}

.qty-stepper__btn[aria-disabled="true"]:hover { background: transparent; }

.qty-stepper__count {
  flex: 1 1 auto;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #1F2937;
  white-space: nowrap;
  user-select: none;
}

/* Too narrow for the words next to two buttons. Visually hidden rather than
   display:none, so the pill still reads "3 in cart" to a screen reader while
   showing just "3". */
@container card-actions (max-width: 176px) {
  .qty-stepper__word {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (forced-colors: active) {
  .qty-stepper { border-color: ButtonBorder; }
  .qty-stepper__glyph { color: ButtonText; }
  .qty-stepper__btn:focus-visible { outline-color: Highlight; }
}