.cartitems-request2:hover {
background-color: var(--color-chocolate);
}
.cartitems-request1:hover {
background-color: rgb(216, 215, 215);
}
.cartitems-request2:active {
opacity:0.8;
}
.cartitems-request1:active {
opacity:0.8;
}
.cartitems-container {
max-width: 280px;
display: flex;
overflow: auto;
min-height: 100vh;
align-items: center;
flex-direction: column;
}
.cartitems-cartitems {
width: 100%;
height: auto;
display: flex;
overflow: hidden;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) ;
align-items: center;
border-radius: 4px;
flex-direction: column;
justify-content: center;
background-color: rgba(250, 250, 250, 1);
}
.cartitems-dropdownselectelements1 {
gap: 10px;
display: flex;
padding: 8px 16px;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
justify-content: center;
background-color: rgba(250, 250, 250, 1);
}
.cartitems-productfield {
gap: 32px;
width: 291px;
display: flex;
padding: 7px 8px;
overflow: hidden;
align-items: center;
flex-shrink: 0;
}
.cartitems-frame5 {
width: 94px;
height: 82px;
display: flex;
overflow: hidden;
position: relative;
box-sizing: content-box;
align-items: flex-start;
flex-shrink: 0;
border-color: rgba(241, 142, 26, 1);
border-style: solid;
border-width: 1px;
border-radius: 8px;
background-color: rgba(245, 245, 245, 1);
}
.cartitems-image0dc33ebe45a44bd1b419dce2a350d2d710a086e39921a {
top: 6px;
right: 17px;
width: 57px;
height: 74px;
position: absolute;
}
.cartitems-frame6 {
gap: 2px;
width: 120px;
display: flex;
align-items: flex-start;
flex-shrink: 0;
flex-direction: column;
}
.cartitems-text10 {
color: rgba(11, 11, 11, 1);
height: auto;
font-size: 14px;
overflow-wrap: break-word;
align-self: stretch;
font-style: Regular;
text-align: left;
font-family: Montserrat;
font-weight: 400;
line-height: normal;
font-stretch: normal;
text-decoration: none;
}
.cartitems-text12 {
color: rgba(127, 127, 127, 1);
height: auto;
font-size: 12px;
align-self: stretch;
font-style: SemiBold;
text-align: left;
font-family: Montserrat;
font-weight: 600;
line-height: normal;
font-stretch: normal;
text-decoration: none;
}
.cartitems-text14 {
color: rgba(241, 142, 26, 1);
height: auto;
font-size: 14px;
align-self: stretch;
font-style: SemiBold;
text-align: left;
font-family: Montserrat;
font-weight: 600;
line-height: normal;
font-stretch: normal;
text-decoration: none;
}
.cartitems-dropdownselectelements2 {
gap: 10px;
height: 48px;
display: flex;
padding: 8px 16px;
align-self: stretch;
align-items: flex-start;
flex-shrink: 0;
flex-direction: column;
justify-content: center;
background-color: rgba(250, 250, 250, 1);
}
.cartitems-controls-text {
gap: 12px;
display: flex;
align-self: stretch;
align-items: center;
flex-shrink: 0;
}
.cartitems-text16 {
color: rgba(127, 127, 127, 1);
height: auto;
font-size: 16px;
font-style: SemiBold;
text-align: left;
font-family: Montserrat;
font-weight: 600;
line-height: normal;
font-stretch: normal;
text-decoration: none;
}
.cartitems-text18 {
color: rgba(11, 11, 11, 1);
height: auto;
font-size: 16px;
font-style: SemiBold;
text-align: left;
font-family: Montserrat;
font-weight: 600;
line-height: normal;
font-stretch: normal;
text-decoration: none;
}
.cartitems-dropdownselectelements3 {
gap: 10px;
display: flex;
padding: 24px 16px;
align-self: stretch;
align-items: center;
flex-direction: column;
justify-content: center;
background-color: rgba(250, 250, 250, 1);
}
.cartitems-frame189 {
gap: 8px;
display: flex;
align-items: center;
}
.cartitems-request1 {
gap: 10px;
display: flex;
padding: 8px 12px;
overflow: hidden;
box-sizing: content-box;
align-items: center;
border-color: rgba(4, 9, 26, 1);
border-style: solid;
border-width: 1px;
border-radius: 8px;
justify-content: center;
}
.cartitems-text20 {
color: rgba(4, 9, 26, 1);
height: auto;
font-size: 16px;
font-style: Medium;
text-align: center;
font-family: Montserrat;
font-weight: 500;
line-height: normal;
font-stretch: normal;
text-decoration: none;
}
.cartitems-request2 {
gap: 10px;
display: flex;
padding: 8px 12px;
overflow: hidden;
align-items: center;
border-radius: 8px;
justify-content: center;
background-color: rgba(241, 142, 26, 1);
}
.cartitems-text22 {
color: rgba(245, 245, 245, 1);
height: auto;
font-size: 16px;
font-style: Medium;
text-align: center;
font-family: Montserrat;
font-weight: 500;
line-height: normal;
font-stretch: normal;
text-decoration: none;
}
@media(max-width: 479px) {
.cartitems-productfield {
padding-top: 7px 8px;
}
}

/* Start of Account Dropdown */
.acctdropdown {
  display: none;
  position: absolute;
  transition: max-height 0.3s ease-in-out, transform 0.3s ease-in-out;
  max-height: 0;
  overflow: hidden;
  overflow-x: hidden;
  z-index: 1000; /* Ensure it appears above other elements */
}

.acctdropdown.show {
  display: block;
  max-height: 100%; /* Adjust this value based on the content height */
  transform: translateY(0);
}

.myaccountlist-container {
max-width: 135px;
display: flex;
overflow: auto;
min-height: 100vh;
align-items: center;
flex-direction: column;
}

.myaccountlist-myaccountlist {
width: 100%;
height: auto;
display: flex;
overflow: hidden;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
align-items: center;
flex-shrink: 0;
border-radius: 4px;
flex-direction: column;
justify-content: center;
}

.myaccountlist-dropdownselectelements1 {
gap: 10px;
display: flex;
padding: 24px;
align-self: stretch;
align-items: center;
flex-direction: column;
justify-content: center;
background-color: rgba(250, 250, 250, 1);
}

.myaccountlist-request {
cursor: pointer;
gap: 10px;
display: flex;
padding: 8px 12px;
overflow: hidden;
align-items: center;
border-radius: 8px;
justify-content: center;
background-color: rgba(241, 142, 26, 1);
}

.myaccountlist-text1 {
color: rgba(245, 245, 245, 1);
height: auto;
font-size: 14px;
font-style: Medium;
text-align: center;
font-family: Montserrat;
font-weight: 500;
line-height: normal;
font-stretch: normal;
text-decoration: none;
}

.myaccountlist-dropdownselectelements2 {
gap: 10px;
height: 48px;
display: flex;
padding: 9px 28px 16px;
align-self: stretch;
align-items: flex-start;
flex-shrink: 0;
flex-direction: column;
justify-content: center;
background-color: rgba(250, 250, 250, 1);
}

.myaccountlist-controls-text1 {
gap: 12px;
display: flex;
align-self: stretch;
align-items: center;
flex-shrink: 0;
}

.myaccountlist-vector1 {
width: 24px;
height: 24px;
}

.myaccountlist-text3 {
color: rgba(11, 11, 11, 1);
height: auto;
font-size: 14px;
font-style: SemiBold;
text-align: left;
font-family: Montserrat;
font-weight: 600;
line-height: normal;
font-stretch: normal;
text-decoration: none;
}

.myaccountlist-dropdownselectelements3 {
gap: 10px;
height: 48px;
display: flex;
padding: 9px 28px 16px;
align-self: stretch;
align-items: center;
flex-shrink: 0;
flex-direction: column;
justify-content: center;
background-color: rgba(250, 250, 250, 1);
}

.myaccountlist-controls-text2 {
gap: 12px;
display: flex;
align-self: stretch;
align-items: center;
flex-shrink: 0;
}

.myaccountlist-group {
width: 24px;
height: 24px;
display: flex;
position: relative;
align-items: flex-start;
flex-shrink: 1;
}

.myaccountlist-vector2 {
top: 2.1694860458374023px;
left: 1.8189894035458565e-12px;
width: 24px;
height: 22px;
position: absolute;
}

.myaccountlist-vector3 {
top: 0px;
left: 8.705445289611816px;
width: 14px;
height: 14px;
position: absolute;
}

.myaccountlist-text5 {
color: rgba(11, 11, 11, 1);
height: auto;
font-size: 14px;
font-style: SemiBold;
text-align: left;
font-family: Montserrat;
font-weight: 600;
line-height: normal;
font-stretch: normal;
text-decoration: none;
}

.myaccountlist-dropdownselectelements4 {
gap: 10px;
height: 48px;
display: flex;
padding: 9px 28px 16px;
align-self: stretch;
align-items: center;
flex-shrink: 0;
flex-direction: column;
justify-content: center;
background-color: rgba(250, 250, 250, 1);
}

.myaccountlist-controls-text3 {
gap: 12px;
display: flex;
align-self: stretch;
align-items: center;
flex-shrink: 0;
}

.myaccountlist-vector4 {
width: 25px;
height: 21px;
box-sizing: content-box;
}

.myaccountlist-text7 {
color: rgba(11, 11, 11, 1);
height: auto;
font-size: 14px;
font-style: SemiBold;
text-align: left;
font-family: Montserrat;
font-weight: 600;
line-height: normal;
font-stretch: normal;
text-decoration: none;
}

/* End of Account Dropdown */

/* Start Categories Dropdown */
/* Start Categories Dropdown */

/* Basic styling for the popup overlay */
#categoriesDDPopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 999;
}

/* Main popup content styling */
.categories-dd {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
}

.categories-dd {
 max-width:1200px;
 height: 80%;
 background: #fff;
 margin: 50px auto;
 width: 80%;
 border-radius: 8px;
 overflow: hidden;
  flex-direction: row;
  
 
}

@media screen and (max-width: 1200px) {
  .categories-dd {
    
   width: 490px;
  
  }
}
@media screen and (max-width: 600px) {
  .categories-dd {
    
   width: 250px;
  
  }
}




/*Cancel Button Features*/
.cancel{
  position: absolute;
  border: none;
  background: none;
  cursor: pointer;
  margin-top: -580px;
 
 
}
 

.cancel:hover {
  opacity: 0.9; /* Slightly dim the image */
}
.cancel.active circle{
  fill:rgb(224, 191, 191);
}
/*End Categories Dropdown*/
/*End Categories Dropdown*/



/*Nigeria Dropdown*/


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 140px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  top: 100%; /* Position below the Nigeria div */
  left: 0;
  border-radius: 8px; /* Rounded corners */
  overflow: hidden;
  border: 1px solid #ddd; /* Light border */
  opacity: 0; /* Start hidden */
  transform: translateY(-20px); /* Start slightly above */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition */
}

.dropdown-content.show {
  display: block;
  opacity: 1; /* Fully visible */
  transform: translateY(0); /* Slide into place */
}

.dropdown-content a {
  color: #333;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
  white-space: normal;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: #007bff; /* Change text color on hover */
}

.flag-icon {
  margin-right: 10px;
  background-color: none;
  width: auto;
  height: 30px;
}



.vector-icon {
  height: 24px;
  width: 24px;
  position: relative;
  min-height: 24px;
}
.placeholder {
  position: relative;
  font-weight: 600;
  white-space: nowrap;
}
.placeholder-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-9xs-5) 0 0;
}
.logoswhatsapp-icon {
  width: 23.8px;
  height: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}


.vector-icon1 {
  width: 13px;
  height: 7.1px;
  position: relative;
  object-fit: contain;
}
.vector-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8.4px 0 0;
}
.emojione-monotoneflag-for-fla-icon {
  height: 24px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 24px;
}


.component-32-icon {
  align-self: stretch;
  height: 17px;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
  transform: rotate(-180deg);
}

.frame-parent {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.frame-wrapper {
  width: 69.1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 6px 0 0;
  box-sizing: border-box;
  flex-shrink: 0;
}
.nav,
.search-area-parent,
.top-nav-parent {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.search-area-parent {
  height: 36px;
  width: 597.5px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 33.9px;
}
.nav,
.top-nav-parent {
  align-self: stretch;
}
.nav {
  background-color: var(--color-gray-100);
  border: 1px solid #f18e1a;
  box-sizing: border-box;
  overflow: hidden;
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-8xs) var(--padding-xl);
  position: relative;
  gap: var(--gap-5xl);
  min-height: 48px;
  flex-shrink: 0;
  font-size: 8px;
  color: #ffffff;
}
.top-nav-parent {
  height: 80px;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--color-gray-100);
  font-family: var(--button-link-1);
}
.home {
  text-decoration: none;
  position: relative;
  font-weight: 500;
  color: inherit;
  display: inline-block;
  min-width: 38px;
}
.link-icons {
  height: 13px;
  width: 7.1px;
  position: relative;
  object-fit: contain;
}
.breadcrumb-words {  
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-5xs);
}
.cart {
  position: relative;
  font-weight: 500;
  display: inline-block;
  min-width: 26px;
}
.checkout,
.vector-icon3 {
  flex: 1;
  position: relative;
  max-width: 100%;
  min-width: 365px;
}
.checkout {
  font-weight: 500;
  display: inline-block;
}
.vector-icon3 {
  height: 13px;
  overflow: hidden;
  object-fit: contain;
}
.breadcrumb-links,
.breadcrumb-words2,
.breadcrumbs {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.breadcrumb-words2 {
  flex: 1;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-5xs);
  min-width: 734px;
}
.breadcrumb-links,
.breadcrumbs {
  align-self: stretch;
}
.breadcrumb-links {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--gap-base);
}
.breadcrumbs {
  background-color: var(--color-gray-100);
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-13xl) var(--padding-73xl);
  box-sizing: border-box;
}
.customer-address1 {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  padding-left: var(--padding-8xl);
}
.customer-address {
  flex: 1;
  position: relative;
  font-size: var(--desktop-headline-4-size);
  font-weight: 600;
  font-family: var(--button-link-1);
  color: #0b0b0b;
  text-align: left;
  display: inline-block;
  max-width: calc(100% - 32px);
}
.default-addy-icon {
  height: 24px;
  width: 24px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.customer-address-header,
.top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.customer-address-header {
  flex: 1;
  gap: var(--gap-5xs);
}
.top {
  align-self: stretch;
  border-bottom: 0.5px solid #7f7f7f;
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--padding-5xl) var(--padding-13xl) 23px;
}
.add-address {
  flex: 1;
  position: relative;
  font-size: var(--desktop-body-2-size);
  font-weight: 600;
  font-family: var(--button-link-1);
  color: #f18e1a;
  text-align: left;
  display: inline-block;
  max-width: calc(100% - 32px);
}

.add-address-button {
  text-decoration: none; /* Removes underline */
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--padding-13xl);
  box-sizing: border-box;
  gap: var(--gap-5xs);
  max-width: 100%;
  cursor: pointer;
}
.add-address-button:hover {
  opacity: 0.7;
 }
 .add-address-button:active {
   opacity: 0.9;
  }
.cancel,
.request-quote1 {
  position: relative;
  font-size: var(--desktop-body-2-size);
  font-weight: 500;
  font-family: var(--button-link-1);
  display: inline-block;
}
.cancel {
  flex: 1;
  color: #7f7f7f;
  text-align: right;
  min-width: 42px;
  max-width: 100%;
}
.request-quote1 {
  color: var(--color-whitesmoke);
  text-align: center;
  min-width: 120px;
}
.select-addy {
  cursor: pointer; /* Changes the cursor to a pointer when hovering */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
  border-radius: var(--br-5xs);
  background-color: #7f7f7f;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-5xs) var(--padding-xs);
  white-space: nowrap;
}

.cancel-select-address,
.customer-addy {
  align-self: stretch;
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
}
.cancel-select-address {
  border-top: 0.5px solid #7f7f7f;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 15px  0 0 var(--padding-13xl);
  gap: var(--gap-5xl);
}
.customer-addy {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  background-color: #ffffff;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-13xl);
  gap: var(--gap-13xl);
}
.delivery-details {
  width: calc(100% - 24px);
  border: 0;
  outline: 0;
  font-weight: 600;
  font-family: var(--button-link-1);
  font-size: var(--desktop-headline-4-size);
  background-color: transparent;
  height: 24px;
  flex: 1;
  position: relative;
  color: #7f7f7f;
  text-align: left;
  display: inline-block;
  min-width: 150px;
  max-width: calc(100% - 32px);
  padding: 0;
}
.address-headers,
.delivery-address-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
}
.address-headers {
  flex: 1;
  gap: var(--gap-5xs);
}
.delivery-address-header {
  align-self: stretch;
}
.deliveray-details,
.top1 {
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
}
.top1 {
  align-self: stretch;
  display: flex;
  justify-content: flex-start;
  padding: var(--padding-5xl) var(--padding-13xl);
  box-sizing: border-box;
  max-width: 100%;
}
.deliveray-details {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  background-color: #ffffff;
}
.deliveray-details,
.delivery-and-payment,
.payment-method,
.payment-method-parent {
  align-self: stretch;
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.payment-method-parent {
  flex-direction: row;
  align-items: center;
  gap: var(--gap-5xs);
}
.delivery-and-payment,
.payment-method {
  flex-direction: column;
  align-items: flex-start;
}
.payment-method {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  background-color: var(--color-gray-100);
  overflow: hidden;
  padding: var(--padding-5xl) var(--padding-13xl);
  box-sizing: border-box;
}
.delivery-and-payment {
  gap: var(--gap-13xl);
}
.continue-shopping-icon {
  height: 18.1px;
  width: 24px;
  position: relative;
  object-fit: contain;
}
.continue-shopping {
  position: relative;
  font-size: var(--desktop-body-2-size);
  font-weight: 600;
  font-family: var(--button-link-1);
  color: #f18e1a;
  text-align: left;
}
.continue {
  text-decoration: none;
}

.continue:hover div {
  color: #7f7f7f;
}

.continue:hover svg path {
  fill: #7f7f7f;
}
.continue:active div {
  opacity :0.8;
}

.continue:hover svg path {
  opacity :0.8;
}
.continue-shopping-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-5xs);
  cursor: pointer;
}
.delivery-and-payment-parent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
 /* gap: 184px; */
  /* min-width: 395px; */
  max-width: 100%;
}
.order-summary1 {
  flex: 1;
  position: relative;
  font-size: var(--desktop-headline-4-size);
  font-weight: 600;
  font-family: var(--button-link-1);
  color: #0b0b0b;
  text-align: center;
  display: inline-block;
  max-width: 100%;
}
.order-summary-wrapper {
  align-self: stretch;
  border-bottom: 0.5px solid #7f7f7f;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-xl) 0 19px;
  max-width: 100%;
  flex-shrink: 0;
}
.div,
.price-details,
.subtotal {
  position: relative;
  font-weight: 600;
  font-family: var(--button-link-1);
}
.price-details {
  align-self: stretch;
  font-size: var(--desktop-body-2-size);
  color: #0b0b0b;
  text-align: center;
  flex-shrink: 0;
}
.div,
.subtotal {
  width: 272px;
  font-size: var(--font-size-sm);
  color: #7f7f7f;
  text-align: left;
  display: inline-block;
}
.div {
  color: #0b0b0b;
  text-align: right;
  white-space: nowrap;
}
.breakdown-items {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-0);
  row-gap: 20px;
}
.apply-coupon,
.div1 {
  width: 272px;
  position: relative;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--button-link-1);
  color: #f11a1a;
  text-align: right;
  display: inline-block;
}
.apply-coupon {
  color: #41e693;
}
.price-breakdown {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-13xl);
}
.order-summary-child {
  align-self: stretch;
  height: 1px;
  position: relative;
  border-top: 1px solid #7f7f7f;
  box-sizing: border-box;
}
.div2,
.total-amount1 {
  width: 272px;
  position: relative;
  font-size: var(--desktop-body-2-size);
  font-weight: 600;
  font-family: var(--button-link-1);
  color: #0b0b0b;
  text-align: left;
  display: inline-block;
}
.div2 {
  text-align: right;
  white-space: nowrap;
}
.total-amount {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-0);
  row-gap: 20px;
}
.button {
  flex: 1;
  position: relative;
  font-size: var(--desktop-headline-4-size);
  line-height: 30px;
  font-weight: 500;
  font-family: var(--button-link-1);
  color: #fefdfe;
  text-align: center;
  display: inline-block;
  max-width: 100%;
}
.subscribe-button {
  cursor: pointer;
  border: 0;
  padding: 13px 40px;
  background-color: #f18e1a;
  align-self: stretch;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
}
.delivery-fees-icon {
  height: 24px;
  width: 26px;
  position: relative;
}
.delivery-fees-not {
  flex: 1;
  position: relative;
  font-size: var(--font-size-sm);
  font-family: var(--button-link-1);
  color: #7f7f7f;
  text-align: left;
  display: inline-block;
  max-width: calc(100% - 34px);
}
.delivery-fees {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-5xs);
  max-width: 100%;
  flex-shrink: 0;
}
.cart-section,
.order-summary {
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
 /* max-width: 100%; */
}
.order-summary {
  flex: 0.8947;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  background-color: #ffffff;
  border-top: 16px solid #f18e1a;
  border-bottom: 16px solid #f18e1a;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--padding-13xl) 47px;
  gap: 33px;
  /* min-width: 395px; */
  min-width: 305px;
}
.cart-section {
  margin: 0;
  align-self: stretch;
  background-color: var(--color-gray-100);
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-13xl) var(--padding-73xl);
  gap: 40px;
}
.promall1crop-2-icon1 {
  width: 131px;
  height: 50px;
  position: relative;
  object-fit: cover;
}
.promallshop-is-an {
  align-self: stretch;
  position: relative;
  line-height: 24px;
  font-weight: 500;
}
.footer-promo {
  width: 224.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-5xl);
  font-size: var(--desktop-body-2-size);
}
.about-us1,
.useful-links {
  position: relative;
  line-height: 26px;
  display: inline-block;
  min-width: 129px;
}
.about-us1 {
  line-height: 24px;
  min-width: 92px;
}
.about-us {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.contact-us1 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}
.contact-us {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}
.terms-of-use {
  flex: 1;
  position: relative;
  line-height: 24px;
}
.terms {
  width: 136px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.privacy-policy {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 123px;
  flex-shrink: 0;
  white-space: nowrap;
}
.faqs {
  width: 54px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.track-my-order {
  position: relative;
  line-height: 24px;
}
.useful-links-parent {
  width: 224.5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 78px 0 0;
  box-sizing: border-box;
  gap: var(--gap-5xl);
}
.contact-us2 {
  align-self: stretch;
  position: relative;
  line-height: 26px;
}
.address-5b-adedeji {
  letter-spacing: -0.04px;
  text-align: left;
}
.address-5b-adedeji,
.email-salespromallshopcom {
  align-self: stretch;
  position: relative;
  line-height: 24px;
}
.address,
.contact-us-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.address {
  align-self: stretch;
  gap: var(--gap-5xs);
  text-align: justify;
  font-size: var(--button-link-1-size);
}
.contact-us-parent {
  width: 224.5px;
  gap: var(--gap-5xl);
}
.socials1 {
  position: relative;
  line-height: 26px;
  display: inline-block;
  min-width: 73px;
}
.fa-brandsinstagram-square-icon {
  height: 24px;
  width: 21px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 24px;
}
.instagram {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 96px;
}
.insta {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-5xs);
}
.streamlinefacebook-1-solid-icon {
  height: 21px;
  width: 21px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.whatsapp1 {
  position: relative;
  line-height: 24px;
  display: inline-block;
  min-width: 97px;
}
.whatsapp {
  flex-direction: row;
  justify-content: flex-start;
  gap: 7px;
}
.check-out-page,
.footer,
.icons,
.whatsapp {
  display: flex;
  align-items: flex-start;
}
.icons {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 99px 0 0;
  gap: var(--gap-5xs);
  text-align: justify;
  font-size: var(--button-link-1-size);
}
.check-out-page,
.footer {
  overflow: hidden;
  text-align: left;
  font-family: var(--button-link-1);
}
.footer {
  align-self: stretch;
  background-color: #0b0b0b;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: var(--padding-13xl) 91px;
  gap: var(--gap-xl);
  font-size: var(--desktop-headline-4-size);
  color: var(--color-gray-100);
}
.check-out-page {
  width: 100%;
  position: relative;
  background-color: var(--color-gray-100);
  flex-direction: column;
  justify-content: flex-start;
  line-height: normal;
  letter-spacing: normal;
  font-size: var(--font-size-xs);
  color: #0b0b0b;
}
@media screen and (max-width: 1225px) {
  .nav {
    flex-wrap: wrap;
  }
  .top-nav-parent {
    height: auto;
  }
  .breadcrumb-words2 {
    flex-wrap: wrap;
  }
  .delivery-and-payment-parent,
  .order-summary {
    flex: 1;
  }
  .cart-section {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1050px) {
  .breadcrumb-words2 {
    min-width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .promo-and-nav {
    gap: 18px;
    flex-wrap: wrap;
  }
  .nav-search-area {
    flex: 1;
  }
  .search-area {
    flex-wrap: wrap;
  }
  .search-area-parent {
    height: auto;
  }
  .breadcrumbs {
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }
  .customer-address,
  .delivery-details {
    font-size: var(--desktop-body-2-size);
  }
  .delivery-and-payment-parent {
    gap: 46px;
  }
  .button,
  .order-summary1 {
    font-size: var(--desktop-body-2-size);
  }
  .button {
    line-height: 24px;
  }
  .cart-section {
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }
}

.atom {
    width: 100%;
    border: 0;
    outline: 0;
    background-color: transparent;
    height: 24px;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 var(--padding-8xs);
    box-sizing: border-box;
    font-family: var(--button-link-1);
    color: var(--color-gray-300);
    min-width: 189px;
}

.atom, .description, .full-name {
    font-size: var(--desktop-body-2-size);
}

.customer-address1 {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    padding-left: 27px;
}

.customer-addy-wrapper {
    align-self: stretch;
    flex-direction: row;
    align-items: flex-start;
    padding: 0 var(--padding-73xl);
}

.customer-addy, .customer-addy-wrapper {
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    max-width: 100%;
}

.full-name {
    position: relative;
    line-height: 140%;
    font-weight: 600;
    font-family: var(--button-link-1);
    color: var(--color-gray-200);
    text-align: left;
}

.atom, .description, .full-name {
    font-size: var(--desktop-body-2-size);
}

.name {
    align-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
    padding: 0 0 0 var(--padding-13xl);
    gap: 64px;
    max-width: 100%;
}
.atom2, .name {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
}

.address-page {
    width: 100%;
    position: relative;
    background-color: var(--color-gray-100);
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--gap-13xl);
    line-height: normal;
    letter-spacing: normal;
}

.name-type-field {
    align-self: stretch;
    border-radius: var(--br-9xs);
    border: 1px solid var(--color-gray-200);
    flex-direction: row;
    align-items: center;
    padding: var(--padding-sm) var(--padding-lgi);
}

.name-type-field, .textarea-field {
    display: flex;
    justify-content: flex-start;
}

.description {
    width: 240px;
    position: relative;
    line-height: 140%;
    font-family: var(--body-base);
    color: var(--text-default-secondary);
    text-align: left;
    display: none;
}

.atom, .description, .full-name {
    font-size: var(--desktop-body-2-size);
}

.textarea-field {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-200);
    min-width: 266px;
    max-width: 100%;
}
.name-type-field, .textarea-field {
    display: flex;
    justify-content: flex-start;
}

.default-addy-icon {
    height: 24px;
    width: 24px;
    position: relative;
}

.circle-button {
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--color-gray-200);
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    outline: none;
}



:root {
    --button-link-1: Montserrat;
    --body-base: Inter;
    --button-link-1-size: 18px;
    --desktop-headline-4-size: 20px;
    --desktop-body-2-size: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --color-gray-100: #fafafa;
    --color-gray-200: #7f7f7f;
    --text-default-secondary: #757575;
    --color-gray-300: #0b0b0b;
    --color-white: #fff;
    --color-darkorange: #f18e1a;
    --color-chocolate: #bd5c00;
    --color-whitesmoke: #f5f5f5;
    --space-200: 8px;
    --gap-13xl: 32px;
    --gap-base: 16px;
    --gap-5xl: 24px;
    --gap-5xs: 8px;
    --padding-13xl: 32px;
    --padding-26xl: 45px;
    --padding-xl: 20px;
    --padding-73xl: 92px;
    --padding-27xl: 46px;
    --padding-5xs: 8px;
    --padding-xs: 12px;
    --padding-sm: 14px;
    --padding-lgi: 19px;
    --padding-lg: 18px;
    --padding-8xs: 5px;
    --padding-5xl: 24px;
    --padding-4xl: 23px;
    --padding-11xs: 2px;
    --padding-9xs-5: 3.5px;
    --br-5xs: 8px;
    --br-9xs: 4px;
}