:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #000000;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --mobileHeaderFontSize: 2rem;
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(2rem, 5vw, 4rem) 1rem;
}

/* montserrat-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('/static/fonts/montserrat-v29-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('/static/fonts/montserrat-v29-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/static/fonts/montserrat-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('/static/fonts/montserrat-v29-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('/static/fonts/montserrat-v29-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('/static/fonts/montserrat-v29-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('/static/fonts/montserrat-v29-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('/static/fonts/montserrat-v29-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.lottie-animation {
    height: 100%;
    width: 100%;
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    color: black;
    height: 100%;
    overflow-x: hidden;
}
*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
button {
    font-family: 'Montserrat', sans-serif;
}
input {
    font-family: 'Montserrat', sans-serif;
}
  #discount-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  #discount-popup {
    background: #fff;
    padding: 24px 28px;
    max-width: 400px;
    width: 90%;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
  }

  #discount-code {
    display: inline-block;
    margin: 10px 0 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 2px dashed #000;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  #discount-popup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 1.4rem;
    cursor: pointer;
  }
#country, #deliveryType {
    height: 2.2rem;
    padding: 8px 10px;
    background-color: white;
    color: black;
    border: solid 2px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
}
.deliveryBanner, .toast {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    padding: 12px 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    z-index: -100;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}
.toast {
    display: none;
    z-index: 1000;
}
.deliveryBanner {
    padding: 12px 0px;
}
.deliveryBanner img{
    width: 0.7rem;
    height: 0.7rem;
}
/* Optional: success/error colors */
.toast.success {
  display: flex;
  background-color: #0ECB4B;
}
.toast.error {
  display: flex;
  background-color: #e74c3c;
}
/* for all social containers*/
.socialContainer {
  width: 52px;
  height: 52px;
  background-color: rgb(44, 44, 44);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: .3s;
}
/* instagram*/
.containerOne:hover {
  background-color: #d62976;
  transition-duration: .3s;
}
/* twitter*/
.containerTwo:hover {
  background-color: #00acee;
  transition-duration: .3s;
}
/* linkdin*/
.containerThree:hover {
  background-color: #0072b1;
  transition-duration: .3s;
}
/* Whatsapp*/
.containerFour:hover {
  background-color: #128C7E;
  transition-duration: .3s;
}

.socialContainer:active {
  transform: scale(0.9);
  transition-duration: .3s;
}

.socialSvg {
  width: 17px;
}

.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.qty-btn {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 48px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.qty-btn:hover {
    background-color: #e6e6e6;
    transform: scale(1.05);
}

.qty-btn:active {
    transform: scale(0.95);
}
.pricing {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}
#toggleDesc {
    color: #4EA9FF;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: underline;
}
#toggleDesc:hover {
    color: #82C3FF;
}
/*.cs-actions p {
    text-align: end;
} */
  #cs-navigation .cs-contact-group {
    display: flex;
    position: relative;
    z-index: 10;
    align-items: center;
    gap: 1rem;
  }
  #cs-navigation .cs-social {
    height: 2rem;
    opacity: 1;
    display: flex;
    visibility: visible;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, visibility 0.3s, height 0.3s;
  }
  #cs-navigation .cs-social-link {
    text-decoration: none;
    width: 2rem;
    height: 2rem;
    background-color: #f7f7f7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #cs-navigation .cs-social-link:hover {
    background-color: var(--primary);
  }
  #cs-navigation .cs-social-link:hover .cs-social-icon {
    opacity: 1;
    filter: grayscale(1) brightness(10000%);
  }
  #cs-navigation .cs-social-icon {
    width: 75%;
    height: 75%;
    opacity: 0.6;
    display: block;
    transition: opacity 0.3s;
  }
/*-- -------------------------- -->
<---       Enquiry Form         -->
<--- -------------------------- -*/

/* Overlay background */
.overlay {
  display: none; /* hidden by default */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding-top: clamp(10rem, 18vw, 12rem);
}

/* Popup form */
.filter-form {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 28px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  animation: fadeInUp 0.25s ease;
  font-family: 'Montserrat', sans-serif;
}

/* Header */
.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.form-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.close-btn {
  border: none;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
  color: #777;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #000;
}

/* Field groups */
.form-section {
  display: flex;
  flex-direction: column;
  margin: 12px 0;
}

.form-section label {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: #444;
}

.form-section select {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  background: #f9f9f9;
  transition: border 0.2s, background 0.2s;
}

.form-section select:hover,
.form-section select:focus {
  border-color: #888;
  background: #fff;
  outline: none;
}

/* Footer */
.form-footer {
  margin-top: 20px;
  text-align: right;
}

.btn-apply {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-apply:hover {
  background-color: #0056b3;
}

/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-name {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #333333;
}
.attributes-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: #1c1c1c;
    border-radius: 12px;
}
.cs-left p {
    line-height: 1.6;
    margin-bottom: 0.75rem;
    color: #333333;
}
.cs-left strong {
    color: #00d26a;
}
.button-div {
    margin-top: 1rem;
}
.image-carousel {
    text-align: center;
}

.cs-product-main {
    width: 100%;
    max-width: 400px;
    max-height: 382px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
    aspect-ratio: 1/1;
}
.cs-product-main:hover {
    transform: scale(1.03);
}

.thumbnail-row {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.thumbnail {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}
.thumbnail:hover {
    border-color: #00d26a;
    transform: scale(1.05);
}
.cta-buttons {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
      position: absolute;
      bottom: 10vh;
}

.btn {
  padding: 15px 35px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.btn-green {
  background: linear-gradient(90deg, #00ff6a, #007a33);
  color: #000;
  box-shadow: 0 0 20px rgba(0, 255, 106, 0.6);
}

.btn-green:hover {
  box-shadow: 0 0 30px rgba(0, 255, 106, 0.9);
  transform: scale(1.05);
}

.btn-outline {
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
}

.btn-outline:hover {
  background: #fff;
  color: #000;
  transform: scale(1.05);
}
.btn-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: none;
  background-color: transparent;
  position: relative;
}

.btn-cart::after {
  content: attr(data-quantity);
  width: fit-content;
  height: fit-content;
  position: absolute;
  font-size: 15px;
  color: white;
  font-family: 'Montserrat', sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s linear;
  top: 115%;
}

/* Default cart icon styles */
.icon-cart {
  width: 24.38px;
  height: 30.52px;
  transition: 0.2s linear;
}

.icon-cart path {
  fill: #0ECB4B;
  transition: 0.2s linear;
}

/* Hover effects */
.btn-cart:hover > .icon-cart,
.btn-cart[data-quantity]:not([data-quantity="0"]) > .icon-cart {
  transform: scale(1.2);
}

.btn-cart:hover > .icon-cart path,
.btn-cart[data-quantity]:not([data-quantity="0"]) > .icon-cart path {
  fill: #0ECB4B;
}

.btn-cart:hover::after,
.btn-cart[data-quantity]:not([data-quantity="0"])::after {
  visibility: visible;
  opacity: 1;
  top: 90%;
}

.quantity {
  display: none;
}

/* General Layout */
.cart-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Items take 2/3 of space, summary 1/3 */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.cart-title {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
}

/* Cart Items Section */
.cart-items {
    border: 1px solid #ddd;
    border-radius: 8px;
    /*padding: 20px;*/
    background-color: #fff;
}

.cart-item {
    display: grid;
    grid-template-columns: 2fr 4fr 3fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-image img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.cart-item-details {
    display: flex;
    flex-direction: column;
}

.cart-item-name {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.cart-item-price {
    font-size: 1rem;
    color: #666;
}

#hero-1619 .cart-item-controls{
    justify-content: center;
    padding: 1rem;
}

#hero-1619 .cart-item-quantity, #quantityNumber{
    color: #333333;
    font-weight: 700;
    font-size: 1rem;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cart-item-controls .remove-btn {
  background-color: #e63946;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-controls button:hover {
    background-color: #f4f4f4;
}

.cart-item-controls span {
    font-size: 0.9rem;
    font-weight: bold;
}

.remove-btn {
    color: red;
    border: none;
    background: none;
    cursor: pointer;
}

/* Order Summary Section */
.order-summary {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background-color: #fff;
    max-height: 600px; /* Set a fixed height */
    display: flex;
    gap: 0.5rem;
    flex-direction: column; /* Ensure proper alignment of children */
    justify-content: space-between; /* Space out content for a clean look */
}

.order-summary h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.delivery-options {
    display: flex;
    flex-direction: column;
}

.summary-item, .summary-item.discount {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 600;
}

.summary-item.discount {
    display: none;
}

.summary-item.total {
    font-weight: bold;
    font-size: 1.2rem;
}

.promo-code {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.promo-code input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.promo-code button {
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.checkout-btn {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
}

.checkout-btn:hover {
    background-color: #333;
}

.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}
.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
    font-family: 'Montserrat', sans-serif;
}
.cs-nav-title {
    /* 16px - 24px */
    width: 100px;
    height: 100%;
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 100;
	font-size: clamp(1rem, 2.5vw, 1.5rem);
	line-height: 1.2em;
	text-decoration: none;
	color: var(--bodyTextColorWhite);
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	white-space: nowrap;
  }

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: #333333;
}

.hero-images {
    display: flex;
    justify-content: space-around; /* Distribute images evenly */
    align-items: center;
    max-width: 80rem;
    margin-top: auto;
}

.hero-image {
    width: 12%; /* Adjust this value depending on the desired size of the images */
    /*height: 160px;*/
    object-fit: fill;
}

.cs-left {
    flex: 1 1 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cs-right{
    flex: 0 1 40%; /* Takes up remaining space on the right, with flexibility */
    text-align: center; /* Align logo to the right */
    justify-content: flex-end;
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;
}

.cs-right-pp {
    flex: 1 1 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cs-logo {
    width: 80%; /* Adjust size to your preference */
    height: auto;
    mix-blend-mode: multiply; /* Allowing the water droplets to come through */
}
  #hero-1618 {
    position: relative;
    z-index: 1;
    height: 100vh;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100vw;
  }
  #hero-1618 .cs-container {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: var(--sectionPadding);
  }
  #hero-1618 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #cart-page, #hero-1619 {
    padding: var(--sectionPadding);
    padding-top: clamp(10rem, 18vw, 12rem);
    position: relative;
    z-index: 1;
    min-height: 100vh;
  }
  #hero-1619 {
    background-color: #F2F5F7;
    color: #fff;
    display: flex;
    justify-content: center;
  }
  #whyChooseUs {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #hero-1619 .cs-container {
    height: 100%;
  }
  #hero-1619 .cs-container, #whyChooseUs .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: unset;
    align-items: center;
    flex-direction: column;
  }
  #whyChooseUs .cs-container {
    /* 60px - 180px */
    gap: clamp(3.75rem, 13vw, 11.25rem);
  }
  #hero-1619 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 80rem;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    flex-grow: 1;
  }
  #whyChooseUs .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 80rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #hero-1618 .cs-topper{
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #hero-1618 .cs-chevron {
    --chevronColor: var(--primary);
    width: 3rem;
    height: auto;
  }
  #hero-1618 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 0 2.5rem 0;
    color: #fff;
  }
  #hero-1618 .cs-button-solid, #hero-1619 .cs-button-solid {
    background-color: #00d26a;
    color: #000;
    border: none;
    border-radius: 50px;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    font-family: 'Montserrat', sans-serif;
  }
#hero-1619 .cs-button-solid:hover:not(:disabled) {
    background-color: #00b359;
    transform: translateY(-2px);
}
#hero-1619 .cs-button-solid:disabled {
    background-color: #555;
    cursor: not-allowed;
}
  #hero-1618 .cs-button-solid:before, #hero-1619 .cs-button-solid:not(:disabled):before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
    border-radius: 62px;
  }
  #hero-1618 .cs-button-solid:hover:before, #hero-1619 .cs-button-solid:hover:before {
    width: 100%;
  }
  #whyChooseUs .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #whyChooseUs .cs-item {
    width: 100%;
    text-align: center;
    list-style: none;
    margin: 0;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #fff;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
  }
  #whyChooseUs .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.5rem 0;
  }
  #hero-1618 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #whyChooseUs .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
  #hero-1618 .cs-background {
    width: 100vw;
    height: 100vh;
    display: block;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #collection-1602{
    padding: var(--sectionPadding);
    /* 200px - 300px - leaving extra space for the navigation */
    padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
    position: relative;
    z-index: 1;
  }
  #collection-1602 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #collection-1602 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  #collection-1602 .cs-title {
    margin: 0;
  }
  #collection-1602 .cs-button-group {
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* 16px - 32px */
    gap: clamp(1rem, 4vw, 2rem);
  }
  #collection-1602 .cs-button {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
    padding: 0;
    color: var(--bodyTextColor);
    background-color: transparent;
    border: none;
    position: relative;
    transition: color 0.3s;
  }
  #collection-1602 .cs-button:before {
    content: "";
    width: 0;
    height: 1px;
    background: var(--primary);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.3s;
  }
  #collection-1602 .cs-button:hover {
    color: var(--primary);
    cursor: pointer;
  }
  #collection-1602 .cs-button:hover:before {
    width: 100%;
  }
  #collection-1602 .cs-button.cs-active {
    color: var(--primary);
  }
  #collection-1602 .cs-button.cs-active:before {
    width: 100%;
  }
  #collection-1602 .cs-listing-wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  #collection-1602 .cs-listing {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    justify-items: center;
    grid-auto-flow: row;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
    position: relative;
    transform-style: preserve-3d;
    perspective: 700px;
    transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s, left 0.3s;
    /* makes the transform scaling origin the top left corner, dictates the direction by which the scale transforms animate towards */
    transform-origin: left top;
    grid-template-columns: repeat(12, 1fr);
    overflow: hidden;
  }
  #collection-1602 .cs-listing.cs-hidden {
    /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
    opacity: 0;
    /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
    visibility: hidden;
    position: absolute;
    /* this top and left value help control the animation, by setting it to position absolute and left 0, the gallery won't fly off screen to the left, it will stop its position to be at the left edge of the .cs-container (left: 0). Same for the top:0 value, the gallery won't go past that position when it animates */
    top: 0;
    left: 0;
    /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
    transform: scaleY(0) scaleX(0);
    /* prevents the mouse from interacting with it */
    pointer-events: none;
  }
  #collection-1602 .cs-listing.cs-hidden .cs-image {
    opacity: 0;
    /* when gallery is hidden, add these styles to the cs-image to animate from when cs-hidden is removed from the .cs-gallery */
    transform: translateY(2.1875rem) rotateX(90deg);
  }
  #collection-1602 .cs-listing.cs-hidden .cs-item {
    transform: rotateY(180deg);
    opacity: 0;
  }
  #collection-1602 .cs-item {
        width: 100%;
        max-width: 23.4375rem;
        min-width: 0;
        opacity: 1;
        padding: 0.5rem;
        border: 1px solid #e8e8e8;
        transform: rotateY(0);
        transition: transform 0.7s, opacity 0.3s;
        grid-column: span 6;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
  }
  #collection-1602 .cs-item:nth-of-type(1) {
    transition-delay: 0.1s;
  }
  #collection-1602 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #collection-1602 .cs-item:nth-of-type(3) {
    transition-delay: 0.3s;
  }
  #collection-1602 .cs-item:nth-of-type(4) {
    transition-delay: 0.4s;
  }
  #collection-1602 .cs-item:nth-of-type(5) {
    transition-delay: 0.5s;
  }
  #collection-1602 .cs-item:nth-of-type(6) {
    transition-delay: 0.6s;
  }
  #collection-1602 .cs-item:nth-of-type(7) {
    transition-delay: 0.7s;
  }
  #collection-1602 .cs-item:nth-of-type(8) {
    transition-delay: 0.8s;
  }
  #collection-1602 .cs-item:nth-of-type(9) {
    transition-delay: 0.1s;
  }
  #collection-1602 .cs-item:nth-of-type(10) {
    transition-delay: 0.1s;
  }
  #collection-1602 .cs-item:nth-of-type(11) {
    transition-delay: 0.1s;
  }
  #collection-1602 .cs-item:nth-of-type(12) {
    transition-delay: 0.1s;
  }
  #collection-1602 .cs-link {
    text-decoration: none;
  }
  #collection-1602 .cs-link:hover .cs-picture img {
    transform: scale(1.1);
  }
  #collection-1602 .cs-picture-group {
    width: auto;
    height: 18.75rem;
    margin-bottom: 1.25rem;
    position: relative;
  }
  #collection-1602 .cs-picture {
    width: 100%;
    height: 100%;
    background-color: white;
    overflow: hidden;
    display: block;
  }
  #collection-1602 .cs-picture img {
    width: 100%;
    height: 100%;
    /* using object-fit contain to keep the entirety of the product image in the frame */
    /* feel free to change this to 'cover', or adjust the background-color above if you have consistent backgrounds on your products */
    object-fit: contain;
    transition: transform 0.6s;
  }
  #collection-1602 .cs-offer {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    padding: 0.375rem;
    color: #fff;
    background: #ff4747;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
  }
  #collection-1602 .cs-category {
    font-size: 1rem;
    line-height: 1.5em;
    color: #767676;
  }
  #collection-1602 .cs-name {
    /* 20px - 25px */
    font-size: clamp(0.8rem, 1vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-overflow: ellipsis;
    white-space: normal;
    width: 100%;
    margin: 0;
    color: var(--headerColor);
    overflow: hidden;
  }
  #collection-1602 .cs-actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
  }
  .cs-price {
    font-size: clamp(1rem, 1vw, 1.5625rem);
    font-weight: 600;
    line-height: 1.2em;
    color: #333333;
    margin: 1rem 0;
    display: inline-block;
  }
  .cs-was-price {
    font-size: clamp(1rem, 1vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    color: #333333;
  }
  #collection-1602 .cs-stars {
    margin-top: 0.25rem;
    display: inline-block;
  }
  #collection-1602 .cs-star {
    width: 1.25rem;
    height: 1.25rem;
  }
  #collection-1602 .cs-buy, #collection-1602 .cs-filter {
    width: 100%;
    padding: 0.8rem;
    background: black;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    border: none;
    border-top: 1px solid #ddd;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s ease;
    margin-top: 0.5rem;
  }
  #collection-1602 .cs-filter {
    margin-top: 0;
  }
  .cs-outofstock {
  text-align: center;
  color: #e63946;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem;
  border-top: 1px solid #ddd;
  margin: 0;
  margin-top: 0.5rem;
}
  #collection-1602 .cs-basket {
    width: 1.5rem;
    height: auto;
  }
  #collection-1552 {
    padding: var(--sectionPadding);
  }
  #collection-1552 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #collection-1552 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  #collection-1552 .cs-item,  #collection-1552 .cs-item-wide, #collection-1552 .cs-item-wide-last{
    max-width: 100%;
    height: 43vw;
    /* removed at tablet */
    max-height: 15.625rem;
    /* 56px - 84px */
    padding: clamp(3.5rem, 7vw, 5.25rem) 1.5rem;
    box-sizing: border-box;
    display: flex;
    grid-column: span 6;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Subtle shadow */
  }
  #collection-1552 .cs-item-wide-last{
    grid-column: span 12;
  }
  #collection-1552 .cs-item:hover .cs-background img, #collection-1552 .cs-item-wide:hover .cs-background img,
  #collection-1552 .cs-item-wide-last:hover .cs-background img{
    opacity: .5;
    transform: scale(1.4);
  }
  #collection-1552 .cs-item-offer {
    max-height: 100%;
    height: auto;
    /* 40px - 80px top & bottom, 24px - 40px sides*/
    padding: clamp(2.5rem, 8vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Subtle shadow */
    grid-row: span 1;
  }
  #collection-1552 .cs-offer-tag {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.5rem;
    color: #f7f7f7;
    background-color: var(--secondary);
    display: block;
  }
  #collection-1552 .cs-h3 {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    max-width: 20ch;
    margin: 0 0 0.25rem;
    color: var(--headerColor);
  }
  #collection-1552 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    display: block;
  }
  #collection-1552 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 1rem 0 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #collection-1552 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #collection-1552 .cs-button-solid:hover:before {
    width: 100%;
  }
  #collection-1552 .cs-background {
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    /* set to -2 so the gradient overlay (z-index: -1) appears in front of the images, but behind the text */
    z-index: -2;
  }
  #collection-1552 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s, transform .6s;
  }
  #collection-1552 .cs-category {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    text-decoration: none;
    width: fit-content;
    /* 12px - 20px top & bottom, 16px - 24px sides*/
    padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 3vw, 1.5rem);
    color: var(--bodyTextColorWhite);
    position: relative;
    transition: background-color 0.3s, color 0.3s;
    /* blurred background - done as a pseudo element so backdrop-filter won't distort the text */
  }
  #collection-1552 .cs-category:hover {
    background-color: #ffffff;
    color: var(--headerColor);
  }
  #collection-1552 .cs-category::before {
    content: "";
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    --webkit-backdrop-filter: blur(8px);
    background-color: rgba(57, 55, 55, 0.68);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
.payment-summary {
    padding: var(--sectionPadding);
    padding-top: clamp(10rem, 18vw, 12rem);
    position: relative;
    z-index: 1;
    height: 100%;
}

.payment-summary h1 {
    color: #4CAF50;
    text-align: center;
}

.payment-summary p {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 20px;
}

.order-details table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.order-details th, .order-details td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

.order-details th {
    background-color: #f4f4f4;
}

.delivery-summary, .total-summary {
    margin: 20px 0;
}

.delivery-summary p, .total-summary h2 {
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
}
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    width: 100%;
    max-width: 100%;
    height: 5rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    /* padding: clamp(0.75rem, 2vw, 1.5rem); */
    background-color: #252525;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #cs-navigation.cs-active:before {
    transform: translateX(-50%) scale(1.03);
  }
  #cs-navigation.cs-active .cs-toggle {
    transform: rotate(180deg);
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    transform: scaleY(1);
    transition-delay: 0.15s;
    background-color: #252525
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: clamp(0.75rem, 2vw, 1.5rem);
  }
  #cs-navigation .cs-logo {
    width: auto;
    max-width: 12.5rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-toggle {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 0 auto;
    background-color: #1a1a1a;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: transform 0.6s;
  }
  #cs-navigation .cs-nav {
    /* sends it to the right in the 3rd position */
    order: 3;
  }
  #cs-navigation .cs-phone {
    display: none;
  }
  #cs-navigation .cs-phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
    background-color: white;
    border-radius: 6px;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    height: 1rem;
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #fafbfc;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #252525;
    border-radius: 0 0 1.5rem 1.5rem;
    position: absolute;
    top: 85%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 4rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: auto;
  }
  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-70/16rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link.cs-active {
    color: white;
  }
  #cs-navigation .cs-li-link.cs-active:hover {
    color: #0ECB4B;
  }
  #cs-navigation .cs-li-link:hover {
    color: #E5383B;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
  #cs-navigation .cs-li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #cs-navigation .cs-dropdown {
    color: #252525;
    position: relative;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    height: auto;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
    opacity: 1;
    visibility: visible;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
    color: white;
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }
  #cs-navigation .cs-drop-ul {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background-color: #252525;
    opacity: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    color: white;
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    background-color: #F2F5F7;
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
    .cart-layout {
        grid-template-columns: 1fr; /* Stack items and summary */
    }
    .cart-items {
        border-radius: 0px;
        padding: 0px;
    }
    .cart-item {
        display: flex;
        flex-direction: column; /* Stack items for smaller screens */
        gap: 1rem;
        padding: 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 1rem;
        /*background-color: #f9f9f9;*/
    }
    .cart-item-image img {
        width: 100%;
        height: auto;
        max-height: 150px;
        object-fit: contain;
        border-radius: 8px;
    }

    .cart-item-details {
        text-align: center;
    }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
.cta-buttons {
      bottom: 5vh;
}
  #collection-1602 .cs-listing {
    grid-template-column: repeat(3, 1fr);
  }
  #collection-1602 .cs-item {
    grid-column: span 1;
  }
  #collection-1602 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 1vw, 1.5625rem);
    font-weight: 700;
  }
  #cs-navigation .cs-dropdown {
    position: relative;
  }
  #cs-navigation .cs-dropdown:hover {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    display: inline-block;
  }
  #cs-navigation .cs-drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #252525;
    box-shadow: inset rgba(149, 157, 165, 0.1) 0px 8px 10px;
    opacity: 0;
    border-bottom: 5px solid #333333;
    border-radius: 0 0 1.5rem 1.5rem;
    visibility: hidden;
    /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
    position: absolute;
    top: 100%;
    z-index: 1001;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-drop-li {
    font-size: 1rem;
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: auto;
    opacity: 0;
    display: block;
    transform: translateY(-0.625rem);
    transition: opacity 0.6s, transform 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    color: #0ECB4B;
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    background-color: #F2F5F7;
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
  #cs-navigation {
    width: 100%;
    max-width: 100%;
    height: 5rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    /* padding: clamp(0.75rem, 2vw, 1.5rem) 0; */
    background-color: #252525;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 2rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: auto;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-phone {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, color 0.3s;
  }
  #cs-navigation .cs-phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
    background-color: white;
    border-radius: 6px;
  }
  #cs-navigation .cs-ul-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    /* absolutely positioned to be dead center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: block;
    position: relative;
    transition: color 0.3s;
  }
  #cs-navigation .cs-li-link:hover {
    color: #0ECB4B;
  }
  #cs-navigation .cs-li-link.cs-active {
    color: white;
  }
  #cs-navigation .cs-li-link.cs-active:hover {
    color: #0ECB4B;
  }
  #cs-navigation .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 2rem;
    color: #fff;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #fff;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover {
    color: #1a1a1a;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1619 {
    padding-top: clamp(10rem, 20vw, 12rem);
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
.cta-buttons {
      bottom: 5vh;
}
  /*#hero-1618 {
    padding-top: 0;
  } */
  #collection-1602 .cs-listing {
    grid-template-column: repeat(3, 1fr);
  }
  #collection-1602 .cs-item {
    grid-column: span 1;
  }
  #collection-1602 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 1vw, 1.5625rem);
    font-weight: 700;
  }
  #whyChooseUs .cs-container {
    justify-content: unset;
  }
  #hero-1619 .cs-content {
    text-align: left;
    margin-left: 0;
    align-items: flex-start;
    /* set text align to left if content needs to be left aligned */
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    flex-grow: 1;
  }
  #whyChooseUs .cs-content {
    flex-direction: column;
  }
  #hero-1619 {
    padding-top: clamp(10rem, 20vw, 12rem);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
.cta-buttons {
      bottom: 5vh;
}
  #collection-1602 .cs-listing {
    grid-template-column: repeat(3, 1fr);
  }
  #collection-1602 .cs-item {
    grid-column: span 1;
  }
  #collection-1602 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 1vw, 1.5625rem);
    font-weight: 700;
  }
  /*#hero-1618 {
    padding-bottom: 0;
  } */
  #hero-1619 .cs-container, #whyChooseUs .cs-container {
    justify-content: unset;
  }
  #hero-1619 .cs-container {
    align-items: flex-start;
  }
  #hero-1619 .cs-content {
    text-align: center;
    margin-left: 0;
    align-items: flex-start;
    flex-direction: column-reverse;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
  }
  #whyChooseUs .cs-item {
    grid-column: span 4;
  }
  #collection-1602 .cs-content {
    flex-direction: row;
  }
  #collection-1602 .cs-listing {
    grid-template-columns: repeat(3, 1fr);
  }
  #collection-1602 .cs-item {
    max-width: none;
  }
  #collection-1602 .cs-picture-group {
    /* 200px - 320px */
    height: clamp(12.5rem, 23vw, 20rem);
  }
  #collection-1552 .cs-container {
    max-width: 80rem;
  }
  #collection-1552 .cs-item {
    /* 188px - 348px */
    grid-column: span 3;
  }
  #collection-1552 .cs-item-offer {
    grid-column: span 6;
  }
  #collection-1552 .cs-item-wide{
    grid-column: span 3;
  }
  #collection-1552 .cs-item-wide-last{
    grid-column: span 12;
  }
  #hero-1619 {
    padding-top: clamp(10rem, 20vw, 12rem);
  }
}