store-front :root {
  --gray-color: #e5e7eb;
  --primary-color: #d46f2c;
  --secondary-color: #2ecc71;
  --text-color: #333333;
}


store-front body {
    background-color: white !important;
}
  

store-front .app-container {
  background-color: white !important;
}
  

store-front .container {
  background-color: white;
  min-height: 100vh;
  min-width: 100%!important;

}
  

store-front .payment-details-container {
    background-color: white;
  }
  

store-front .storeLogo {
    width: 30vw;
    object-fit: "contain";
    border-radius: 50%;
  }
  

store-front .storeHeading {
    color: white;
    font-size: 5vw;
  }
  

store-front .storeHeading h1 {
    margin: 5px;
  }
  

store-front .storeHeroText {
    color: white;
    padding: 10px 20px;
    font-size: 4vw;
  }
  

store-front .storeHeroText p {
    margin: 5px;
  }
  

store-front .my-component {
    font-family: Arial, sans-serif;
    padding: 20px;
    border: 2px solid #333;
    border-radius: 8px;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    background-color: white !important;
  }
  

store-front .productCard {
    width: 50%;
  }
  
  /* Container for Products */

store-front .products-container {
    display: grid;
    grid-template-columns: repeat(2, 45vw); /* Two columns, responsive */
    gap: 1rem; /* Space between items */
    max-width: 1200px;
    margin: 0 auto; /* Center the grid */
  }
  
  /* Individual Product Card */

store-front .product-card {
    /* background-color: #0d2654;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    padding: 2vw;
    flex-direction: column; */
  }
  

/* .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  } */
  
  /* Product Image */

store-front .product-image img {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    background-color: #0d2654;
    overflow: hidden;
    transition: box-shadow 0.3s;
    border-radius: 0.375rem;
  }
  

store-front .product-image:hover {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Product Details */

store-front .product-details {
    text-align: center;
  }
  
  .product-title {
   
  }

store-front .product-description {
    font-size: 4vw;
    color: #666;
    margin-bottom: 15px;
  }
  

store-front .product-price {
    font-size: 4vw;
    color: white;
    font-weight: bold;
  }
  

store-front .product-price-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  /* Button */

store-front .product-button {
    padding: 5px 15px;
    font-size: 0.8rem;
    color: #fff;
    background-color: #ec6a48;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
  }
  

store-front .selcted-item-heading {
    text-align: left;
    font-size: 5vw;
    color: #fff;
    margin: 5px 0px;
    margin-left: 3vw;
  }
  

store-front .selcted-item-description {
    text-align: left;
    font-size: 3vw;
    color: #fff;
    margin: 0px;
    margin-bottom: 3vw;
    margin-left: 3vw;
  }
  

store-front .selcted-item-description span {
    color: #ec6a48;
  }
  

store-front .discounted-price {
    font-weight: 700; /* font-bold */
    color: #047857; /* text-green-700 */
    font-size: 0.8rem; /* text-[0.8rem] */
  }
  

store-front .original-price {
    color: #6b7280; /* text-gray-500 */
    font-size: 0.8rem; /* text-[0.8rem] */
  }
  

store-front .home-heading {
    color: blue;
  }
  

store-front .about-heading {
    color: red;
  }
  
  /*******************Product Details*********************/
  

store-front .product-selected-image {
    width: 100%;
  }
  

store-front .product-slider-image {
    width: 20vw;
  }
  

store-front .product-slider-container {
    display: flex;
    flex-direction: row;
    gap: 10;
    justify-content: center;
  }
  

store-front .product-name {
    font-size: 5vw;
    color: white;
    text-align: left;
  }
  

store-front .flex {
    display: flex;
  }
  

store-front .flex-row {
    flex-direction: row;
  }
  

store-front .items-center {
    align-items: center;
  }
  

store-front .space-between {
    justify-content: space-between;
  }

store-front .product-price {
    color: rgba(255, 255, 255, 0.8);
  }
  

store-front .text-left {
    text-align: left;
  }
  

store-front .text-white {
    color: #fff;
  }
  

store-front .mt-2 {
    margin-top: 2vw;
  }
  

store-front .mb-2 {
    margin-bottom: 2vw;
  }

store-front .add-to-cart {
    background-color: #ec6a48;
    width: 100%;
    font-size: 5vw;
    padding: 2vw;
    border-radius: 10vw;
    border: 0px;
  }
  

store-front .variant-btn {
    background-color: #ec6a48;
    font-size: 3vw;
    padding: 1vw 2vw;
    border-radius: 5vw;
    border: 0px;
  }
  

store-front .gap-2 {
    gap: 2vw;
  }

store-front .p-2 {
    /* padding: 2vw; */
  }

store-front .transparent-card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2vw;
    font-size: 4vw;
    text-align: left;
  }
  

store-front .tab-btn {
    background-color: unset;
    border: 0px;
    padding: 2vw;
  }
  

store-front .tab-btn-active {
    border-bottom: 1vw solid #ec6a48;
  }
  

store-front p {
    margin: 0px;
  }
  

store-front .bg-orange {
    background-color: #ec6a48;
  }
  

store-front .h-90vh {
    height: 90vh;
  }


  /********COLLECTION LOGO*************/

store-front .logo-container {
    display: inline-block;
    border-radius: 9999px;  
    overflow: hidden;
    margin-bottom: 2rem; 
    border-width: 2px; 
    border-color: var(--gray-color);
  }


store-front .logo {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
    border-radius: 9999px;
  }
  
  /********COLLECTION LOGO*************/

  /********COLLECTION Heading*************/


store-front .collection-heading {
    font-size: 1.875rem;
    font-weight: 600;
    color: #ffffff;
    top: -20px;
    display: inline-block;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin: auto;
  }
  
  /********COLLECTION Heading*************/

  /********COLLECTION Description*************/


store-front .collection-description {
    color: #ffffff;
    line-height: 1.625;
    word-break: break-word;
  }
  
  /********COLLECTION Description*************/


  /********PRODUCT DETAILS*************/

store-front .product-detail-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    max-height: 24rem;
  }

  

store-front .product-detail-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  


store-front .product-detail-title {
    font-size: 1.075rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #ffffff;
  }


store-front .product-detail-original-price {
    color: #ffffff;
    text-decoration: line-through;
  }
  

store-front .product-detail-discounted-price {
    margin-left: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #2c6f2f;
  }


store-front .product-detail-price {
    color: #ffffff;
    font-weight: bold;
  }


store-front .product-detail-variant-type {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #ffffff;
  }
  

store-front .product-detail-variant-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }



store-front .product-detail-variant {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-width: 1px;
    border-radius: 0.375rem;
  }
  

store-front .product-detail-variant.selected {
    border-color: var(--gray-color);
    color: var(--gray-color);  
  }
  

store-front .product-detail-variant.deselected {
    border-color: #d1d5db;  
    color: #d1d5db;  
  }
  

store-front .product-detail-variant.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  


store-front .add-to-cart-btn {
    width: 100%;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 10rem;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
  }
  

store-front .add-to-cart-btn.out-of-stock {
    background-color: #e5e7eb;  
    color: #6b7280;  
    cursor: not-allowed;
  }
  

store-front .add-to-cart-btn.in-stock {
    background-color: #d46f2c; 
    color: #ffffff;
    transition: background-color 0.3s ease;
  }
  

store-front .add-to-cart-btn.in-stock:hover {
    background-color: var(--primary-color); 
  }


store-front .out-of-stock-error {
    color: #ff0000; /* text-red-500 */
    margin-bottom: 1rem;
  }


store-front .ship-by-detail {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #ffffff;
  }
  

store-front .product-detail-tab-nav-container {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  

store-front .product-detail-tab-btn {
    font-weight: 600;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  

store-front .product-detail-tab-btn.active {
    border-bottom: 2px solid #d46f2c; 
    color: #ffffff;
  }
  

store-front .product-detail-tab-btn.inactive {
    color: #d1d5db;
  }
  

store-front .product-detail-tab {
    margin-top: 1rem;
    space-y: 1rem;
    font-size: 0.875rem;
    color: #ffffff;
  }
  


store-front .customizable-note-container {
    margin-bottom: 1rem;
  }
  

store-front .customizable-note-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0.25rem;
  }
  

store-front .customizable-note-input {
    width: 100%;
    padding: 0.5rem;
    border-width: 1px;
    border-radius: 0.375rem;
  }
  

store-front .customizable-note-input:focus {
    outline: none;
    ring: 2px solid #fb923c; /* Orange-500 */
    border-color: #fb923c; /* Orange-500 */
  }
  

store-front .customizable-note-error {
    color: #ff0000; /* text-red-500 */
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }

  /********PRODUCT DETAILS*************/


  /****************SHOPPING CART**********/

store-front .cart-header {
    position: sticky;
    top: 0;
    background-color: #ffffff;
    z-index: 10;
    padding: 1rem;
  }


store-front .cart-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }


store-front .cart-header-title {
    font-size: 1.5rem;
    font-weight: 700;
  }
  

store-front .cart-header-close {
    color: #6b7280;  
    transition: color 0.3s ease;
  }
  

store-front .cart-header-close:hover {
    color: #374151;  
  }



store-front .cart-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
  }
  

store-front .cart-item {
    margin-bottom: 1.5rem;
    border-width: 2px;
    border-color: #e5e7eb; /* border-gray-200 */
    border-radius: 0.5rem;
    padding: 1rem;
  }
  

store-front .cart-item-title {
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  

store-front .cart-product {
    border-top-width: 1px;
    padding-top: 1rem;
    margin-top: 1rem;
  }
  

store-front .cart-product:first-child {
    border-top-width: 0;
    padding-top: 0;
    margin-top: 0;
  }
  

store-front .cart-product-header {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
  }
  

store-front .cart-product-image-container {
    position: relative;
    margin-right: 1rem;
  }
  

store-front .cart-product-image {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 0.375rem;
  }
  

store-front .cart-product-remove-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    color: #ef4444; /* text-red-500 */
    transition: color 0.3s ease;
  }
  

store-front .cart-product-remove-btn:hover {
    color: #b91c1c; /* text-red-700 */
  }
  

store-front .cart-product-title {
    font-weight: 600;
    font-size: 0.875rem;
  }
  

store-front .cart-product-variant {
    font-size: 1rem;
    color: #4b5563; /* text-gray-600 */
  }
  

store-front .cart-product-note {
    font-size: 1rem;
    color: #4b5563; /* text-gray-600 */
  }
  

store-front .cart-product-note span {
    font-weight: 600;
  }
  

store-front .cart-quantity-container {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0 0.5rem;
    border-width: 1px;
    border-radius: 0.375rem;
    max-width: 145px;
  }
  

store-front .cart-quantity-btn {
    color: #6b7280; /* text-gray-500 */
    transition: color 0.3s ease;
  }
  

store-front .cart-quantity-btn:hover {
    color: #374151; /* text-gray-700 */
  }
  

store-front .cart-quantity-input {
    margin: 0 0.5rem;
    width: 4rem;
    text-align: center;
    font-size: 1.125rem;
    border-left-width: 1px;
    border-right-width: 1px;
  }
  

store-front .cart-product-price {
    font-size: 1.125rem;
    color: #4b5563; /* text-gray-600 */
  }
  

store-front .cart-product-price .original-price {
    text-decoration: line-through;
    margin-right: 0.5rem;
  }
  

store-front .cart-product-price .discounted-price {
    color: #2c6f2f; /* text-green-700 */
  }
  

store-front .cart-product-unavailable {
    color: #ef4444; /* text-red-500 */
    margin-top: 0.5rem;
    font-size: 1rem;
  }
  

store-front .cart-subtotal {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top-width: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  

store-front .cart-subtotal-label {
    font-weight: 600;
    font-size: 1.1rem;
  }
  

store-front .cart-subtotal-value {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2c6f2f; /* text-green-700 */
  }


store-front .cart-footer {
    position: sticky;
    bottom: 0;
    background-color: #ffffff;
    z-index: 10;
    padding: 1rem;
    border-top: 1px solid #e5e7eb; /* border-gray-200 */
  }
  

store-front .cart-footer-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  

store-front .cart-footer-total span {
    font-weight: 600;
    font-size: 1.25rem;
  }
  

store-front .cart-footer-checkout {
    background-color: #f97316; /* bg-orange-500 */
    width: 100%;
    color: #ffffff;
    padding: 1rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.25rem;
    text-align: center;
    transition: background-color 0.3s ease;
  }
  

store-front .cart-footer-checkout:hover {
    background-color: #ea580c; /* bg-orange-600 */
  }
  

store-front .cart-footer-checkout:disabled {
    background-color: #d1d5db; /* bg-gray-300 */
    cursor: not-allowed;
  }
  


store-front .empty-cart-container {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1rem;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
  }
  

store-front .empty-cart-title {
    color: #6b7280; /* text-nay50 */
    font-weight: 700;
    font-size: 1.875rem; /* text-3xl */
  }
  

store-front .empty-cart-message {
    color: #6b7280; /* text-nay50 */
  }
  

store-front .empty-cart-button {
    text-decoration: underline;
    color: #d46f2c;
    cursor: pointer;
  }
  

store-front .empty-cart-button:hover {
    opacity: 0.8;
  }
  

store-front .cart-drawer {
    background-color: #ffffff;
    width: 40%; /* w-2/5 */
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem; /* p-6 */
  }


store-front .cart-mobile-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top-left-radius: 1rem; /* rounded-t-2xl */
  border-top-right-radius: 1rem; /* rounded-t-2xl */
  display: flex;
  flex-direction: column;
  height: 90vh; /* h-90vh */
  transition: transform 0.3s ease-out; /* transition-transform duration-300 ease-out */
}


store-front .cart-mobile-drawer.open {
  transform: translateY(0); /* translate-y-0 */
}


store-front .cart-mobile-drawer.closed {
  transform: translateY(100%); /* translate-y-full */
}
/****************SHOPPING CART**********/


/****************ORDER LISTING COMPONENT**********/

store-front .order-listings-container {
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto; /* mx-auto */
  margin-right: auto;
  space-y: 1rem; /* Space between child elements */
}


store-front .order-listings-card {
  background-color: #f3f4f6; /* bg-gray-100 */
  padding: 1.5rem; /* p-6 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* shadow */
  margin-bottom: 1rem;
}


store-front .order-listings-card-header {
  font-size: 0.875rem; /* text-sm */
  font-weight: 600; /* font-semibold */
  margin-bottom: 1rem; /* mb-4 */
}


store-front .order-listings-divider {
  border-top: 1px solid #e5e7eb; /* hr border-gray-300 */
}


store-front .order-listings-item-container {
  display: flex; /* flex */
  align-items: center; /* items-center */
  gap: 1rem; /* space-x-4 */
  margin-bottom: 1rem; /* mb-4 */
  margin-top: 1rem; /* mt-4 */
}


store-front .order-listings-item-image-wrapper {
  position: relative; /* relative */
}


store-front .order-listings-item-image {
  width: 4rem; /* w-16 */
  height: 4rem; /* h-16 */
  object-fit: cover; /* object-cover */
  border-radius: 0.375rem; /* rounded-md */
}


store-front .order-listings-item-quantity-badge {
  position: absolute; /* absolute */
  top: -0.5rem; /* -top-2 */
  right: -0.5rem; /* -right-2 */
  background-color: #d46f2c; /* bg-orange-500 */
  color: #ffffff; /* text-white */
  font-size: 0.75rem; /* text-xs */
  font-weight: 700; /* font-bold */
  border-radius: 9999px; /* rounded-full */
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
}


store-front .order-listings-item-title {
  font-weight: 500; /* font-medium */
  font-size: 0.875rem; /* text-sm */
}


store-front .order-listings-item-price {
  font-weight: 600; /* font-semibold */
  font-size: 0.875rem; /* text-sm */
}


store-front .order-listings-item-details {
  font-size: 0.875rem; /* text-sm */
  color: #4b5563; /* text-gray-600 */
  margin-top: 0.25rem; /* mt-1 */
}


store-front .order-listings-card-footer {
  margin-top: 0; /* mt-0 */
  padding-top: 1rem; /* pt-4 */
  border-top: 1px solid #d1d5db; /* border-gray-300 */
  gap: 0.5rem; /* space-y-2 */
}


store-front .order-listings-footer-row {
  display: flex; /* flex */
  justify-content: space-between; /* justify-between */
  align-items: center; /* items-center */
  font-size: 1rem; /* text-sm */
}


store-front .order-listings-footer-row.bold {
  font-weight: 600; /* font-semibold */
}


store-front .order-listings-footer-note {
  margin-top: 1rem; /* mt-4 */
  font-size: 0.875rem; /* text-sm */
  color: #4b5563; /* text-gray-600 */
  font-style: italic; /* italic */
}


store-front .order-listings-footer-note .brand-name {
  font-weight: 600; /* font-semibold */
}

/****************ORDER LISTING COMPONENT**********/


/****************CUSTOMER INFO FORM***************/
@media (min-width: 1024px) {

store-front .payment-details-layout {
      display: flex;
      flex-direction: row;
      gap: 2rem;
  }

store-front .payment-form {
      width: 60%;
      order: -1;
  }

store-front .order-summary {
      width: 40%;
  }
}


store-front .customer-info-form-space-y > * + * {
  margin-top: 0.5rem; /* Corresponds to space-y-6 */
}


store-front .customer-info-form {
  padding: 1rem; /* p-4 */
  border: 1px solid #d1d5db; /* border-gray-300 */
  border-radius: 0.5rem; /* rounded-lg */
}


store-front .customer-info-form-label {
  display: block;
  font-size: 0.875rem; /* text-sm */
  color: #6b7280; /* text-gray-500 */
  margin-bottom: 0.25rem; /* mb-1 */
}


store-front .customer-info-form-input {
  width: 100%;
  padding: 0.5rem; /* px-3 py-2 */
  border: 1px solid #d1d5db; /* border-gray-300 */
  border-radius: 0.375rem; /* rounded-md */
  outline: none;
}


store-front .customer-info-form-input:focus {
  ring: 1px solid #000000; /* focus:ring-1 focus:ring-black */
}


store-front .customer-info-form-error {
  margin-top: 0.25rem; /* mt-1 */
  font-size: 0.875rem; /* text-sm */
  color: #f87171; /* text-red-600 */
}


store-front .customer-info-form-helper-text {
  margin-top: 0.25rem; /* mt-1 */
  font-size: 0.75rem; /* text-xs */
  color: #6b7280; /* text-gray-500 */
}


store-front .customer-info-form-divider {
  border-top: 1px solid #e5e7eb; /* border-gray-200 */
}


store-front .customer-info-form-header {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  color: #1f2937; /* text-gray-800 */
}


store-front .customer-info-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* gap-6 */
}


store-front .customer-info-form-grid-md {
  grid-template-columns: repeat(2, 1fr);
}


store-front .customer-info-form-submit {
  width: 100%;
  background-color: #f97316; /* bg-orange-500 */
  color: #ffffff; /* text-white */
  font-weight: 700; /* font-bold */
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border-radius: 9999px; /* rounded-full */
  transition: background-color 0.3s;
}


store-front .customer-info-form-submit:hover {
  background-color: #ea580c; /* hover:bg-orange-600 */
}


store-front .customer-info-form-small-text {
  color: #7f7e81;
  font-size: 0.875rem; /* text-[0.8rem] */
}


store-front .customer-info-form-small-text .agreement {
  color: #4b5563; /* text-gray-600 */
}


store-front .customer-info-form-error-message {
  font-size: 0.875rem; /* text-sm */
  color: #f87171; /* text-red-600 */
}
/****************CUSTOMER INFO FORM***************/


/****************PAYMENT FORM CUSTOMER INFO***************/

store-front .payment-form-customer-info {
  background-color: #fff;
  border: 1px solid #e5e7eb; /* Gray-300 */
  border-radius: 0.5rem; /* Rounded-lg */
  padding: 1rem; /* p-4 */
  margin-bottom: 1.5rem; /* mb-6 */
}


store-front .payment-form-customer-info .payment-form-customer-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem; /* mb-4 */
  border-bottom: 1px solid #e5e7eb; /* border-b border-gray-300 */
  padding-bottom: 0.75rem; /* pb-3 */
}


store-front .payment-form-customer-info .payment-form-customer-info-header h2 {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: #1f2937; /* text-gray-800 */
}


store-front .payment-form-customer-info .payment-form-customer-info-header button {
  background-color: #4b5563; /* bg-gray-700 */
  color: #fff;
  padding: 0.25rem 0.75rem; /* px-3 py-1 */
  border-radius: 0.375rem; /* rounded */
  font-size: 0.875rem; /* text-sm */
  display: flex;
  align-items: center;
}


store-front .payment-form-customer-info .payment-form-customer-info-header button:hover {
  background-color: #374151; /* hover:bg-gray-800 */
}


store-front .payment-form-customer-info .payment-form-customer-info-header button svg {
  height: 1rem; /* h-4 */
  width: 1rem; /* w-4 */
  margin-right: 0.25rem; /* mr-1 */
}


store-front .payment-form-customer-info .payment-form-customer-info-body {
  font-size: 0.875rem; /* text-sm */
  color: #4b5563; /* text-gray-600 */
  line-height: 1.25rem;
}


store-front .payment-form-customer-info .payment-form-customer-info-body p {
  margin-bottom: 0.25rem; /* space-y-1 */
}

/****************PAYMENT FORM CUSTOMER INFO***************/

/****************PAYMENT FORM CONTAINERS***************/

store-front .payment-details-payment-form-container {
  background-color: #fff;
  border: 1px solid #e5e7eb; /* Gray-300 */
  border-radius: 0.5rem; /* Rounded-lg */
  padding: 1rem; /* p-4 */
}


store-front .payment-details-payment-form-container .payment-details-payment-form-container-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem; /* mb-4 */
}


store-front .payment-details-payment-form-container .payment-details-payment-form-container-header h2 {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: #1f2937; /* text-gray-800 */
}


store-front .payment-details-payment-form-container .payment-details-payment-form-container-body {
  width: 100%;
}
/****************PAYMENT FORM CONTAINERS***************/


/****************PAYMENT FORM ORDER PLACING LOADER***************/
@keyframes spin {

store-front 0% { transform: rotate(0deg); }

store-front 100% { transform: rotate(360deg); }
}
    @media (max-width: 1023px) {

store-front .payment-details-layout {
      display: flex;
      flex-direction: column;
  }

store-front .order-summary {
      order: -1;
      margin-bottom: 1rem;
  }
}
@media (min-width: 1024px) {

store-front .payment-details-layout {
      display: flex;
      flex-direction: row;
      gap: 2rem;
  }

store-front .payment-form {
      width: 60%;
      order: -1;
  }

store-front .order-summary {
      width: 40%;
  }
}


store-front .order-placing-loader-container {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5); /* bg-black bg-opacity-50 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50; /* z-50 */
}


store-front .order-placing-loader-box {
  background-color: #fff;
  padding: 1.5rem; /* p-6 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
  text-align: center;
}


store-front .order-placing-loader {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-bottom: 1rem;  
  margin-left: auto;
  margin-right: auto;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #f97316;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}


store-front .order-placing-loader p {
  margin-top: 0.5rem;
}


store-front .order-placing-loader-text {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
}


store-front .order-placing-loader-subtext {
  font-size: 0.875rem; /* text-sm */
  color: #4b5563; /* text-gray-600 */
  margin-top: 0.5rem; /* mt-2 */
}

/* Loader spin animation */
@keyframes spin {

store-front 0% { transform: rotate(0deg); }

store-front 100% { transform: rotate(360deg); }
}
/****************PAYMENT FORM ORDER PLACING LOADER***************/

/****************ORDER CONFIRMATION***************/

store-front .order-confirmation-min-h-screen {
  min-height: 100vh;
}


store-front .order-confirmation-p-4 {
  padding: 1rem;
}


store-front .order-confirmation-mt-8 {
  margin-top: 2rem;
}


store-front .order-confirmation-max-w-3xl {
  max-width: 48rem;
}


store-front .order-confirmation-mx-auto {
  margin-left: auto;
  margin-right: auto;
}


store-front .order-confirmation-space-y-4 > * + * {
  margin-top: 1rem;
  margin-bottom: 1rem;

}


store-front .order-confirmation-border {
  border-width: 1px;
}


store-front .order-confirmation-border-gray-200 {
  border-color: #e5e7eb;
}


store-front .order-confirmation-rounded-lg {
  border-radius: 0.5rem;
}


store-front .order-confirmation-p-6 {
  padding: 1.5rem;
}


store-front .order-confirmation-text-center {
  text-align: center;
}


store-front .order-confirmation-h-16 {
  height: 4rem;
}


store-front .order-confirmation-w-16 {
  width: 4rem;
}


store-front .order-confirmation-mx-auto {
  margin-left: auto;
  margin-right: auto;
}


store-front .order-confirmation-mb-4 {
  margin-bottom: 1rem;
}


store-front .order-confirmation-text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}


store-front .order-confirmation-font-semibold {
  font-weight: 600;
}


store-front .order-confirmation-mb-2 {
  margin-bottom: 0.5rem;
}


store-front .order-confirmation-text-white {
  color: #ffffff;
}



store-front .order-confirmation-details-container {
  padding: 1rem;
  max-width: 80rem;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}


store-front .order-confirmation-details-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem 0.5rem;
  margin-bottom: 1.5rem;
  justify-content: space-between;
}


store-front .order-confirmation-details-header-item {
  margin-bottom: 0.25rem;
  flex: 1 0 31%;
}


store-front .order-confirmation-details-header-item-title {
  font-size: 1.125rem;
  color: #4b5563;
}


store-front .order-confirmation-details-header-item-value {
  font-weight: 600;
}


store-front .order-confirmation-details-brand {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}


store-front .order-confirmation-details-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {

store-front .order-confirmation-details-brand-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}


store-front .order-confirmation-details-brand-item-title {
  font-size: 1rem;
  color: #4b5563;
  margin-bottom: 0.25rem;
}


store-front .order-confirmation-details-brand-item-value {
  font-weight: 600;
}


store-front .order-confirmation-details-item {
  background-color: #f3f4f6;
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}


store-front .order-confirmation-details-item-image {
  max-width: 5rem;
  object-fit: cover;
  border-radius: 0.5rem;
}


store-front .order-confirmation-details-item-content {
  flex-grow: 1;
}


store-front .order-confirmation-details-item-title {
  font-size: 1.125rem;
  font-weight: 600;
}


store-front .order-confirmation-details-item-meta {
  font-size: 0.875rem;
  color: #4b5563;
}


store-front .order-confirmation-details-item-price {
  font-size: 0.875rem;
}


store-front .order-confirmation-details-item-price-strike {
  text-decoration: line-through;
}


store-front .order-confirmation-details-item-price-discount {
  color: #047857;
  font-weight: 600;
}


store-front .order-confirmation-details-contact {
  font-size: 0.875rem;
  color: #4b5563;
}


store-front .order-confirmation-details-contact a {
  color: #1d4ed8;
  font-weight: 600;
  text-decoration: none;
}


store-front .order-confirmation-details-contact a:hover {
  text-decoration: underline;
}

/****************ORDER CONFIRMATION***************/


store-front .redeem-label {
  color: #ec6a48;
  font-weight: 600;
}

store-front .tooltip-text-table {
    visibility: hidden;
    background-color: #E1E8EC !important;
    color: var(--misty-blue-800);
    text-align: center;
    padding: 14px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 60%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

store-front .ellipsis-text-product {
  max-width: 169px;
  display: -webkit-box;
  -webkit-line-clamp: 2;     
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;          
  min-height: calc(2 * 1.5em);
  font-weight: 500;
}

store-front .ellipsis-text {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}

store-front .tooltip-container-table {
    position: relative;
    /* display: inline-block; */
}

store-front .tooltip-container-table:hover .tooltip-text-table {
  visibility: visible;
  opacity: 1;
}

store-front .tooltip-text-table::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #E1E8EC transparent transparent transparent !important;
}

store-front .custom-tool-tip {
  position: absolute;        
  left: 50%;                 
  bottom: -10px;            
  transform: translateX(-50%) rotate(180deg);
  transform-origin: center; 
  z-index: -1;   
}