:root {
      --text: #1c1c1c;
      --muted: #6f6f6f;
      --line: #e9ecef;
      --chip: #f7f7f7;
      --accent: #111;
    }

 

    .breadcrumb-link {
      color: var(--muted);
      text-decoration: none;
      font-size: .92rem;
    }

    .breadcrumb-link:hover {
      text-decoration: underline;
    }

    .page-title {
      font-weight: 700;
      letter-spacing: .02em;
    }

 
    /* Product row */
    .cart-item {
      border-top: 1px solid var(--line);
      padding: 18px 0;
    } 
    .cart-thumb {
      width: 60px;
      height: 84px;
      object-fit: cover;
      border: 1px solid var(--line);
    }
.cart-item:last-child {
      border-bottom: 1px solid var(--line); 
    } 
  

    .item-meta {
      font-size: .92rem;
      color: var(--muted);
    }

    .qty-control {
      display: inline-flex;
      align-items: center;
      font-size: 13px;
      border: 1px solid #292929;
      border-radius: 0;
      overflow: hidden;
    }

    .qty-btn {
      width: 36px;
      height: 32px;
      border: 0;
      background: #fff;
      font-weight: 400;
      line-height: 1;
    }

    .qty-input {
      width: 44px;
      height: 32px;
      border: 0;
      text-align: center;
      font-weight: 400;
    }

    /* Summary card */
    .summary {
      border: 1px solid var(--line);
      border-radius: 0;
      padding: 20px;
    }

    .summary-title {
      font-weight: 700;
      letter-spacing: .02em;
    }

    .summary-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
 

    .terms small {
      color: var(--muted);
    }

    .btn-checkout {
      width: 100%;
      padding: 14px 16px;
      font-weight: 400;
      letter-spacing: .02em;
    }
    /*---Empty Cart --*/
    .lereve-empty-cart {
    	  display: flex;
    	  flex-direction: column;
    	  gap: 10px;
    	  align-items: center;
    	  justify-content: center;
    	  height: 100%;
    	}
    
    .lrvEmptyCart {
    	  display: inline-flex;
    	  flex-direction: column;
    	  align-items: center;
    	  gap: 20px;
    	  position: relative;
    	}
      .emptyCartBack {
    	  box-sizing: border-box;
    	  display: inline-block;
    	  align-items: center;
    	  padding: 4px 16px 2px 16px;
    	  background-color: #fff;
    	  border: 1px solid;
    	  border-color: #bdbdbd;
    	}

    	.emptyCartBack .backTxt {
    	  display: inline-flex;
    	  align-items: center;
    	  justify-content: center;
    	  gap: 8px;
    	  text-decoration: none;
    	  color: #292929;
    	  font-size: 14px;
    	}
  

    /* Divider between items like the screenshot */
    .cart-divider {
      height: 1px;
      background: var(--line);
    }

    /* Make right column align with screenshot spacing */
    @media (min-width: 992px) {
      .summary-stick {
        position: sticky;
        top: 24px;
      }
    }





    
    /* =========== Checkout  page  start  -----------------*/

    
 
    /* 1) Remove Bootstrap validation icons on all controls */
.checkout-page-section .form-control.is-valid,
.checkout-page-section .form-control.is-invalid,
.checkout-page-section .was-validated .form-control:valid,
.checkout-page-section .was-validated .form-control:invalid,
.checkout-page-section .form-select.is-valid,
.checkout-page-section .form-select.is-invalid,
.checkout-page-section .was-validated .form-select:valid,
.checkout-page-section .was-validated .form-select:invalid,
.checkout-page-section .form-check-input.is-valid,
.checkout-page-section .form-check-input.is-invalid,
.checkout-page-section .was-validated .form-check-input:valid,
.checkout-page-section .was-validated .form-check-input:invalid {
  background-image: none !important; /* kills the SVG check/x/info icons */
  padding-right: .75rem;             /* reset room reserved for the icon */
}

/* 2) Remove the focus ring (outline + shadow) */
.checkout-page-section .form-control:focus,
.checkout-page-section .form-select:focus,
.checkout-page-section .form-check-input:focus,
.checkout-page-section .btn:focus {
  box-shadow: none !important;
  outline: 0 !important;
}

input#coupon.is-invalid {
    border-right: 1px solid;
}
/* Optional: keep a super subtle focus (accessibility friendly) */
/*
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus {
  box-shadow: 0 0 0 .15rem rgba(0,0,0,.05) !important;
  outline: 0 !important;
}
*/



    .form-control,
    .form-select {
      border-color: var(--line);
      border-radius: 3px;
      height: 48px
    }

    .form-control::placeholder {
      color: #9a9a9a
    }

    .panel {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 4px
    }

    .panel-soft {
      background: #fafafa;
      border: 1px solid var(--line);
      border-radius: 4px
    }

    .summary {
      background: #fafafa;
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 16px
    }

    .summary .row+.row {
      margin-top: .25rem
    }

    .summary .label {
      color: var(--muted)
    }

 

    .coupon .btn {
      border-radius: 0 4px 4px 0
    }

    .coupon .form-control {
      border-right: 0;
      border-radius: 4px 0 0 4px
    }

   
    .foot-link {
      color: var(--muted);
      font-size: .95rem
    }

    /* Error styles */
    .is-invalid,
    .was-validated .form-control:invalid {
      border-color: #dc3545 !important
    }

    .invalid-feedback {
      display: none
    }

    .error .invalid-feedback {
      display: block;
    }

    /* Make the whole page breathe like the screenshot */
    .content-gutters {
      padding-left: 24px;
      padding-right: 24px
    }

    @media (min-width:992px) {
      .content-gutters {
        padding-left: 40px;
        padding-right: 40px
      }

      .right-sticky {
        position: sticky;
        top: 24px
      }

          .checkout-form-wrap {
    max-width: 85%;
}
.checkout-page-section { 
    background: linear-gradient(to right, white 0%, white 66%, #FAF8F6 66%, #FAF8F6 100%);
}
    }


    /* =========== Checkout  page  end  -----------------*/
    
    /* ======== Thank you  page  css  Start ============= */
    .thankyou-page {
      display: flex;
      justify-content: center;
      padding-top: 100px;
      flex-direction: column;
      padding-bottom: 100px;
      max-width: 555px;
      margin: 0 auto;
    }

    .thankyou-page-icon {
      text-align: center;
      margin-bottom: 10px;
    }

    .thankyou-inner {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      position: relative;
    }

    .thankyou-inner .privilage-member {
      position: relative;
      max-width: 555px;
      min-height: 126px;
      background-color: #fff;
      border-radius: 4px;
      overflow: hidden;
      width: 100%;
    }

    .thankyou-inner .more-info {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      position: relative;
      margin: 0 auto;
      text-align: center;
      justify-content: center;
      width: 100%;
    }

    .thankyou-inner .img {
      position: relative;
      width: 16px;
      height: 16px;
    }

    .thankyou-inner .text-wrapper {
      position: relative;
      font-weight: 500;
      color: rgba(51, 181, 229, 1);
      font-size: 12px;
      letter-spacing: 0;
      line-height: 20px;
      margin: 0;
      text-decoration: underline;
      white-space: nowrap;
    }

    .thankyou-inner .buy-tk-more-by {
      position: relative;
      width: 100%;
      top: auto;
      margin: 0 auto;
      max-width: 100%;
      font-weight: 400;
      color: transparent;
      font-size: 13px;
      text-align: center;
      letter-spacing: 0;
      line-height: 24px;
      padding-left: 20px;
      padding-right: 20px;
    }
    .thankyou-inner .span {
      font-weight: 500;
      color: #292929;
    }

    .thankyou-inner .text-wrapper-2 {
      font-weight: 700;
      color: #292929;
    }

    .thankyou-inner .text-wrapper-3 {
      font-weight: 500;
      color: #33b5e5;
      text-decoration: underline;
    }

    .thankyou-inner .overlap {
      position: relative;
      height: 30px;
      width: 100%;
      margin-top: 35px;
    }

    .thankyou-inner .overlap-group {
      position: relative;
      height: 24px;
      left: 0;
      width: 100%;
    }

    .thankyou-inner .loading-bar {
      position: absolute;
      max-width: 97%;
      height: 7px;
      top: 9px;
      left: 0;
      width: 100%;
    }
    .thankyou-inner .complete-load-wrapper {
      position: relative;
      max-width: 97%;
      width: 100%;
      height: 9px;
      top: -1px;
      left: -1px;
      background-color:  #BDBDBD;
      border-radius: 25px;
      border: 1px solid;
      border-color: #BDBDBD;
    }

    .thankyou-inner .complete-load {

      height: 7px;
      background-color: #FED90B;
      border-radius: 25px 0px 0px 25px;
    }

    .thankyou-inner .gold-icon {
      position: absolute;
      width: 24px;
      height: 24px;
      top: 0;
      right: 19px;
      background-color: rgba(231, 197, 10, 1);
      border-radius: 12px;
      border: 1px solid;
      border-color: rgba(255, 243, 179, 1);
    }
    .thankyou-inner .essetional-crown {
      position: absolute;
      width: 12px;
      height: 12px;
      top: 5px;
      left: 5px;
    }

    .thankyou-inner .pin {
      position: absolute;
      width: 7px;
      height: 13px;
      top: -12px;
    }

    .thankyou-inner .div {
      position: absolute;
      top: -15px;
      left: 19px;
      letter-spacing: 0;
      white-space: nowrap;
      font-size: 12px;
      font-weight: bold;
      line-height: 16px;
      text-align: center;
    }
    .thankyou-inner .text-wrapper-4 {
      right: 20px;
      position: absolute;
      top: -15px;
      color: #292929;
      letter-spacing: 0;
      margin: 0;
      white-space: nowrap;
      font-size: 12px;
      font-weight: bold;
      line-height: 16px;
      text-align: right;
    }
    .thankyou-inner .navbar {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 16px 24px;
      position: relative;
      flex: 0 0 auto;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid;
      border-color: rgba(234, 234, 234, 1);
    }

    .thankyou-inner .p {
      position: relative;
      font-weight: 400;
      color: #000000;
      font-size: 12px;
      letter-spacing: 0;
      line-height: 20px;
    }

    .thankyou-inner .text-wrapper-5 {
      font-weight: 400;
      color: #000000;
      font-size: 12px;
      letter-spacing: 0;
      line-height: 20px;
    }

    .thankyou-inner .text-wrapper-6 {
      font-weight: 600;
      font-size: 14px;
    }

    .thankyou-inner .line {
      position: relative;
      width: 1px;
      height: 25px;
      object-fit: cover;
    }

    .thankyou-inner .shipping-address {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding: 16px 24px;
      position: relative;
      align-self: stretch;
      width: 100%;
      flex: 0 0 auto;
      background-color: rgba(255, 255, 255, 1);
      border: 1px solid;
      border-color: rgba(234, 234, 234, 1)
    }

    .thankyou-inner .title {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
      position: relative;
      flex: 0 0 auto;
    }

    .thankyou-inner .div-2 {
      gap: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex: 0 0 auto;
    }

    .thankyou-inner .chip-text {
      position: relative;
      font-weight: 500;
      color: rgba(41, 41, 41, 1);
      font-size: 14px;
      letter-spacing: 0;
      line-height: 16px;
      white-space: nowrap;
    }

    .thankyou-inner .nayem-manikertek {
      position: relative;
      font-weight: 400;
      color: rgba(41, 41, 41, 1);
      font-size: 18px;
      letter-spacing: 0;
      line-height: 24px;
    }

    .thankyou-inner .text-wrapper-7 {
      font-weight: 700;
    }

    .thankyou-inner .text-wrapper-8 {
      font-weight: 500;
      font-size: 14px;
    }

    .thankyou-inner .amount {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 16px 24px;
      position: relative;
      align-self: stretch;
      width: 100%;
      flex: 0 0 auto;
      background-color: rgba(255, 255, 255, 1);
      border: 1px solid;
      border-color: rgba(234, 234, 234, 1);
    }

    .thankyou-inner .amount-segment {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding: 8px 0px;
      position: relative;
      align-self: stretch;
      width: 100%;
      flex: 0 0 auto;
    }

    .thankyou-inner .discount {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      align-self: stretch;
      width: 100%;
      flex: 0 0 auto;
    }

    .thankyou-inner .text-wrapper-9 {
      position: relative;
      width: fit-content;
      font-weight: 500;
      color: rgba(112, 112, 112, 1);
      font-size: 12px;
      letter-spacing: 0;
      line-height: 16px;
      white-space: nowrap;
      margin-bottom: 0;
    }

    .thankyou-inner .text-wrapper-10 {
      position: relative;
      width: fit-content;
      margin-top: -1px;
      color: rgba(41, 41, 41, 1);
      letter-spacing: 1.2px;
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      white-space: nowrap;
    }

    .thankyou-inner .divider {
      position: relative;
      align-self: stretch;
      width: 100%;
      height: 1px;
      object-fit: cover;
    }

    .thankyou-inner .total {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 8px 0px;
      position: relative;
      align-self: stretch;
      width: 100%;
      flex: 0 0 auto;
    }

    .thankyou-inner .text-wrapper-11 {
      position: relative;
      font-weight: 700;
      color: rgba(41, 41, 41, 1);
      font-size: 14px;
      letter-spacing: 0;
      line-height: 16px;
      white-space: nowrap;
    }

    .thankyou-inner .text-wrapper-12 {
      position: relative;
      font-weight: 700;
      color: rgba(41, 41, 41, 1);
      font-size: 14px;
      letter-spacing: 1.4px;
      line-height: 16px;
      white-space: nowrap;
    }

    .thankyou-inner .action-buttons {
      display: flex;
      width: 100%;
      max-width: 555px;
      align-items: flex-start;
      gap: 16px;
      position: relative;
      flex: 0 0 auto;
    }

    .thankyou-inner .div-3 {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      position: relative;
      flex: 1;
      flex-grow: 1;
    }

    .thankyou-inner .button {
      all: unset;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      position: relative;
      flex: 1;
      cursor: pointer;
      flex-grow: 1;
      background-color: rgba(255, 255, 255, 1);
      border: 1px solid;
      border-color: rgba(189, 189, 189, 1);
    }

    .thankyou-inner .div-4 {
      gap: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex: 0 0 auto;
    }

    .thankyou-inner .text-wrapper-13 {
      position: relative;
      font-weight: 500;
      color: rgba(41, 41, 41, 1);
      font-size: 12px;
      letter-spacing: 0;
      line-height: normal;
    }


    .thankyou-page .topOrderTxt .text-wrapper {
      font-weight: 500;
      color: #292929;
      font-size: 14px;
      letter-spacing: 0;
      line-height: normal;
    }

    .range-area {
      position: relative;
      text-align: center;
      max-width: 303px;
      margin: 0 auto;
    }

    @media screen and (max-width:600px) {
      .thankyou-page {
        padding: 10px;
      }

      .thankyou-inner .navbar {
        gap: 15px;
      }

      .thankyou-inner .p {
        width: 46%;
      }

      .thankyou-inner .navbar {
        gap: 15px;
        justify-content: flex-start;
      }

      .navbar img.line {
        display: none;
      }

      .thankyou-inner .discount .text-wrapper-9 {
        max-width: 85%;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 2%;
      }

    }


    @media screen and (max-width:480px) {
      .range-area {
        max-width: 200px;
      }

      .thankyou-inner .navbar {
        gap: 20px;
        padding: 16px 12px;
      }

      .thankyou-inner .buy-tk-more-by {
        max-width: 289px;
      }

      .thankyou-inner .privilage-member {
        min-height: 205px;
      }

      .thankyou-inner .action-buttons {
        flex-direction: column;
      }

      .thankyou-inner .div-3 {
        width: 100%;
      }

      .thankyou-inner .action-buttons {
        padding: 12px 20px;
        gap: 10px;
      }
    }