@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');



body {

    font-family: 'Montserrat', Arial, sans-serif;

    margin: 0;

    padding: 0;

    line-height: 1.6;

    background-color: #f2f2f2;

    color: #333;

    transition: all 0.3s ease;

}



* {

    box-sizing: border-box;

}



header {

	margin: 15px 0;

}



.header-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    width: 100%;

}



@media (min-width: 992px) {

    .header-container {

        flex-direction: row;

        margin: 0 auto;

		gap:80px;

		width:100%;

    }



    header .logo {

        max-width: 50%;

    }



    .compliance-journey {

        max-width: 50%;

        text-align: left;

        margin-left: 20px;

    }

}



.compliance-journey {

    font-family: 'Montserrat', Arial, sans-serif;

    font-size: 0.9rem; /* Adjust size as needed */

    color: #333;

    text-align: center;

    margin: 0; /* Adjust margin as needed */

}



header .phone-number,

header .catch-phrase {

    font-family: 'Montserrat', sans-serif;

    color: #808080;

    font-weight: 700;

    margin-top: 0.3rem;

    font-size: 0.9rem; /* Adjusted font size */

    line-height: 1.2;

}



header .logo {

    width: 100%;

    height: auto; /*

    display: block;

    margin: 0 auto;

    padding-bottom: 0.3rem; */

    max-width: 280px;

}



@media (max-width: 1200px) {

    header .logo {

        max-width: 280px;

    }

}



@media (max-width: 992px) {

    header .logo {

        max-width: 250px;

    }

}



@media (max-width: 768px) {

    header .logo {

        max-width: 220px;

    }

}



@media (max-width: 576px) {

    header .logo {

        max-width: 200px;

    }

}



nav {

    margin-top: 0;

    padding: 0.3rem 0;

    position: sticky;

    top: 0;

     background: #444;

	/*background: #e67e22;*/

    z-index: 1000;

    width: 100%;

}



nav ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    justify-content: center;

}



nav ul li {

    margin: 0;

}



nav ul li a {

    color: #fff;

    text-decoration: none;

    padding: 0.8rem;

    display: block;

    position: relative;

    transition: background 0.3s ease;

}

nav ul li a.active {
    text-decoration: underline;
    background-color: #e67e22; /* Optional: highlight the active link */
}

nav ul li a::after {

    content: '';

    position: absolute;

    width: 0;

    height: 2px;

    display: block;

    margin-top: 5px;

    right: 0;

    background: #e67e22;

    transition: width 0.3s ease;

}




nav ul li a:hover::after,
nav ul li a.active::after {
    width: 100%;
    left: 0;
}





.hero {

    background: url('images/hero.png') no-repeat center center/cover;

    text-align: center;

    padding: 4rem 0;

    color: #fff;

    width: 100%;

    margin: 1rem auto 2.5rem;

}



.hero-content {

    background: rgba(0, 0, 0, 0.4); /* Adjusted transparency */

    display: inline-block;

    padding: 2rem !important;

    border-radius: 0;

	width: 100%;

}



main {

    margin: 0 auto;

    width: 100%;

}



main h2 {

    color: #333;

    text-align: center;

    margin-top: 30px;

}



section {

	width:100%;

    /* padding: 3.5rem; */

    border-radius: 0;

    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/

    margin:  0.05rem auto;

    padding: 0.5rem 1rem 0.5rem 1rem;



}



section:nth-of-type(odd) {

	background-color:#fff !important;

}



section:nth-of-type(even) {

	background-color:#f7f7f7 !important;

}



.section-content {

	max-width: 1000px;

	margin: 0 auto;

	padding: 1rem 0;

}

.calculator {
	max-width: 1000px;
	margin: 0 auto;
	padding: 1rem 0;
}




.button {

    display: inline-block;

    padding: 0.5rem 1.5rem;

    color: #fff;

    background: #e67e22; /* Same orange color */

    text-decoration: none;

    border-radius: 25px; /* Rounded corners */

    text-align: center;

    transition: background 0.3s ease, transform 0.3s ease;

    font-family: 'Montserrat', sans-serif;

    font-weight: bold;

    border: none; /* No outline */

    box-shadow: none; /* No shadow */

}



.button:hover {

    background: #d35400; /* Slightly darker orange on hover */

    transform: scale(1.05); /* Slightly increase size on hover */

}



form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    background: #fff;

    padding: 2rem;

    border-radius: 10px;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

}



form label {

    font-weight: bold;

    color: #333;

}



form input,

form textarea,

form select,

form button {

    padding: 0.75rem;

    border: 1px solid #ccc;

    border-radius: 8px;

    font-size: 1rem;

    transition: border-color 0.3s ease, box-shadow 0.3s ease;

}



form input:focus,

form textarea:focus,

form select:focus {

    border-color: #e67e22;

    box-shadow: 0 0 5px rgba(230, 126, 34, 0.5);

    outline: none;

}



form textarea {

    resize: vertical;

    min-height: 150px;

}



form input[aria-invalid="true"],

form textarea[aria-invalid="true"] {

    border-color: #e74c3c;

}



form input[aria-invalid="true"]:focus,

form textarea[aria-invalid="true"]:focus {

    box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);

}



form button {

    display: inline-block;

    padding: 0.5rem 1.5rem;

    color: #fff;

    background: #e67e22; /* Same orange color */

    text-decoration: none;

    border-radius: 25px; /* Rounded corners */

    text-align: center;

    transition: background 0.3s ease, transform 0.3s ease;

    font-family: 'Montserrat', sans-serif;

    font-weight: bold;

    border: none; /* No outline */

    box-shadow: none; /* No shadow */

    cursor: pointer;

}



form button:hover {

    background: #d35400; /* Slightly darker orange on hover */

    transform: scale(1.05); /* Slightly increase size on hover */

}



footer {

    background: #444;

    color: #fff;

    text-align: center;

    padding: 1rem 0;

    margin-top: 1rem;

    width: 100%;

}



footer a {

    color: #fff;

    text-decoration: none;

}



footer a:hover {

    text-decoration: underline;

}



footer i {

    margin-right: 0.5rem;

}



blockquote {

    /* background: #f4f4f4; */

    border-left: 4px solid #e67e22;

	border-radius: 3px;

    margin: 1rem 0;

    padding: 1rem;

    font-style: italic;

}



blockquote cite {

    display: block;

    margin-top: 0.5rem;

    text-align: right;

    color: #555;

}



html {

    scroll-padding-top: 30px;

}



.success-message {

    background-color: #d4edda;

    color: #155724;

    border: 1px solid #c3e6cb;

    padding: 1rem;

    border-radius: 5px;

    margin: 1rem 0;

    text-align: center;

}



/* Add new styles for mobile view */

@media (max-width: 600px) {

    form label {

        display: block;

        margin-bottom: 5px;

    }

    form input, form select, form textarea {

        width: 100%;

        margin-bottom: 15px;

    }



    .extra-field, #region-options, #booking-options {

        display: block;

    }



    #region-options label, #booking-options label, .extra-field label {

        margin-top: 15px;

    }

}









/* FAQ Section Styles */

#faq {

    margin:  0.05rem auto;

    padding: 0.5rem 0.5rem 0.5rem;

}



#faq details {

    margin-bottom: 0.05rem;

    padding: 0.05rem 0.05rem;

    transition: all 0.3s ease;

}



#faq summary {

    font-size: 1rem;

    font-weight: normal;

    padding: 0.25rem 0.25rem;

	border-radius: 3px;

    background: #f7f7f7;

    color: #333;

    cursor: pointer;

    position: relative;

    transition: all 0.3s ease;

    border-left: 4px solid transparent;

}



#faq details[open] summary,

#faq summary:hover {

    border-left-color: #e67e22;

}



#faq details p {

    padding: 0.25rem 0.25rem;

    margin: 0;

}section.info-section {

    background-color: #e6f7ff !important; /* Light blue background to highlight the section */

    padding: 20px;

    border-radius: 8px;

}



.info-section h2 {

    color: #333;

    margin-bottom: 10px;

    text-align: center;

}



.info-section p {

    color: #555;

    font-size: 16px;

    line-height: 1.5;

    text-align: center;

}



details {

    margin-bottom: 1em;

}

summary {

    cursor: pointer;

    font-weight: bold;

}



/* Additional CSS for 404 Page */





/* Flexbox centering */

.error-page {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 40vh; /* Adjust as needed for spacing */

    text-align: center;

    padding: 1rem;

}



.error-page h1 {

    color: #e67e22;

}



.button-link {

    display: inline-block;

    padding: 0.5rem 1rem;

    color: #e67e22;

    text-decoration: none;

    border-bottom: 2px solid transparent;

    transition: all 0.3s ease;

}



.button-link:hover {

    border-bottom: 2px solid #e67e22;

    background: none; /* Ensure no background color change on hover */

}



.hero2 {

    position: relative;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    overflow: hidden;

    border: 3px solid orange; /* Thicker border */

    border-radius: 70px; /* Larger border-radius */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}



.carousel {

    position: relative;

    width: 100%;

    display: flex;

    overflow: hidden;

}



.carousel-item {

    min-width: 100%;

    transition: opacity 1s ease-in-out;

    opacity: 0;

    position: absolute;

    top: 0;

    left: 0;

}



.carousel-item.active {

    opacity: 1;

    position: relative;

}



.carousel-item img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 25px; /* Match container's border-radius */

}



.carousel-caption {

    position: absolute;

    bottom: 20px;

    left: 20px;

    background-color: rgba(0, 0, 0, 0.5);

    color: #fff;

    padding: 10px;

    border-radius: 10px;

}

/* Ensure no margins and full-width background */


/* Blog wrapper to stretch full width */
.blog-wrapper {
    width: 100%;
	padding: 0px;
}

/* Alternating background colors */
.blog-wrapper:nth-child(even) {
    background-color: #ffffff; /* White */
	width: 100%;
}

.blog-wrapper:nth-child(odd) {
    background-color: #f0f0f0; /* Light gray */
	width: 100%;
}

/* Content container stays centered */
.blog-container {
    max-width: 1000px; /* Keeps content within a standard width */
    margin: 0 auto; /* Centers the content */
    padding: 9px;
    box-sizing: border-box;
    position: relative;
}

/* Blog post layout */
.blog-post {
    padding: 0 5px;
    box-sizing: border-box;
    position: relative;
}

.blog-thumbnail {
    width: 150px;
    height: auto;
    display: block;
    margin: 10px 0;
}

.blog-date {
    font-size: 14px;
    color: #FFA500; /* Darker Blue */

}

.blog-description {
    margin-top: 10px;
}

.blog-content {
    clear: both;
    padding-top: 10px;
    line-height: 1.6;
    /*display: none; */
}

.blog-image img {
    width: 100%;
    max-width: 400px; /* Ensures image does not exceed this width on larger screens */
    height: auto;
    display: block;
    margin: 10px 0;
    float: left;
    margin-right: 15px;
	border-radius: 15px;
}

.read-more-btn {
    background-color: #ff8c00; /* Orange color */
    color: #fff;
	margin-top: 15px;
    border: none;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    clear: both;
	width: 120px;
	text-align:center;
	font-size:15px;
	text-decoration:none;
}

.read-more-btn:hover {
    background-color: #e67600; /* Darker orange for hover */
}

.blog-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 15px 0;
}



/* Mobile view adjustments */
@media (max-width: 768px) {
    .blog-thumbnail {
        display: block; /* Hide thumbnail on mobile */
		border-radius: 10px;
    }

    .blog-image img {
        max-width: 100%; /* Ensures image fits within container width on mobile */
        float: none; /* Removes float for a cleaner stacked layout */
        margin: 10px 0; /* Centered with consistent margin */
		border-radius: 15px;
		}
}
.pagination {
    text-align: center;
    margin-top: 20px;
    padding: 10px 0;
}

.pagination-link {
    display: inline-block;
    padding: 6px 10px;
    margin: 0 3px;
    color: #555; /* Dark grey text */
    background-color: #f0f0f0; /* Light grey background */
    text-decoration: none;
    border: 1px solid #ccc; /* Darker grey border */
    border-radius: 3px;
    font-size: 12px;
    transition: background-color 0.3s, color 0.3s;
}

.pagination-link:hover {
    background-color: #e0e0e0; /* Slightly darker grey on hover */
    color: #333; /* Darker grey text on hover */
}

.pagination-link.active {
    background-color: #d0d0d0; /* Darker grey for active state */
    color: #333; /* Darker text for active state */
    font-weight: bold;
    pointer-events: none;
}

/*SCALING LOAD */

.slider-container-overlay {
    position: relative; /* Ensure absolute children are scoped correctly */
    z-index: 10;
}

#sliderBox {
    position: absolute;
    top: -60px; /* Position above the slider */
    transform: translateX(-50%) scaleX(-1); /* Center and fix flipped text */
    background: #fff;
    color: #000;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    z-index: 20; /* Ensure it stays above the slider */
}

#sliderBox span {
    transform: scaleX(-1); /* Counteract the flipped parent container */
    display: inline-block;
}

.weight-label {
    position: absolute;
    z-index: 15; /* Ensure labels are above the image but below the sliderBox */
}

.towball-label, .axle-label {
    transform: scaleX(-1); /* Correct flipped text */
}

 .resultTC {
            background: #f9f9f9;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-top: 20px;
        }

        .resultTC-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            font-size: 14px;
        }



        .resultTC p {
            font-size: 14px;
            color: #333;
            text-align: center;
        }

        .container {
            max-width: 600px;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

 .resultLA {
      background: #f4f4f4;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-top: 10px;
    }
    .image-container {
      position: relative;
      margin-top: 20px;
      text-align: center;
    }
    .image-container img {
      max-width: 100%;
    }
.slider-container-overlay {
  position: absolute;
  top: -40px; /* Raised slider bar another 15px */
  left: 0px;
  width: 110%;
  transform: scaleX(-1);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background: transparent;
  position: relative;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  background: #ddd;
  border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 40px;
  background: #ffa500;
  border: 2px solid #cc8400;
  border-radius: 4px;
  cursor: pointer;
  margin-top: -15px;
}

#sliderBox {
  position: absolute;
  top: -55px; /* Adjusted to drop the slider box by 15px */
  transform: translateX(-50%) scaleX(-1); /* Keep text alignment correct */
  background: #f2f2f2;
  color: #000;
  padding: 0px 0px;
  border-radius: 0px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.towball-label,
.axle-label {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
}

.towball-label {
  bottom: 10%; /* Restores TBW to its expected position */
  left: -5%; /* Keeps it aligned on the left */
}

.axle-label {
  bottom: 10%; /* Restores Axle to its expected position */
  left: 60%; /* Keeps it aligned on the right */
}


#sliderBox span {
  transform: scaleX(-1);
  display: inline-block;
}
.resultLA {
  background: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 20px;
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

.resultLA-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 1rem;
}

.resultLA-row:last-child {
  margin-bottom: 0;
}

.resultLA-title {
  font-weight: bold;
  color: #333;
}

.resultLA-value {
  font-weight: bold;
}

.resultLA-change {
  color: #3498db; /* Blue for increase/decrease values */
  font-weight: bold;
  font-size: 0.9rem;
}


input.read-only {
    background-color: #f3f3f3; /* Light gray background */
    color: #6c757d;           /* Dark gray text */
    cursor: not-allowed;      /* Disable pointer interaction */
    border: 1px solid #ddd;   /* Optional subtle border */
}

input.read-only:focus {
    outline: none; /* Remove focus outline to prevent confusion */
}

/* Glide Carousel Container */
.glide {
  max-width: 600px;
  margin: 40px auto;
  position: relative; /* Needed for arrow positioning */
}

/* Slides */
.glide__slide {
  padding: 20px;
}

/* Review Card */
.google-reviews .review {
  background: #f9f9f9;
  border-left: 4px solid #f68f22;
  padding: 20px;
  border-radius: 6px;
  font-family: "Montserrat", sans-serif;
}

/* Star Ratings */
.star {
  color: #fbc02d;
  font-size: 16px;
}
.star.inactive {
  color: #ddd;
}

.glide {
  max-width: 600px;
  margin: 40px auto;
  position: relative;
  padding: 0 20px; /* space for arrows if needed */
}

.glide__arrows {
  position: absolute;
  top: 50%;
  left: -20px;
  right: -20px;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none; /* so they don't block review clicks */
}

.glide__arrow {
  pointer-events: all;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 10;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glide__arrow:hover {
  background-color: rgba(246, 143, 34, 0.1);
  border-radius: 50%;
}

.glide__arrow svg {
  width: 28px;
  height: 28px;
  fill: #f68f22;
}
.pricing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 500px;
}

.pricing-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.pricing-item span {
  flex-grow: 1;
  font-size: 1rem;
}

.book-now {
  background-color: #f68f22;
  color: #fff;
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  margin-left: 10px;
  line-height: 1;
  display: inline-block;
}

.book-now:hover {
  background-color: #cc7500;
}
















































/* OpenCart header/footer scaffolding */
.top-bar {
  background: #3b3b3b;
  color: #fff;
  font-size: 14px;
}
.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}
.top-bar a { color: #fff; text-decoration: none; }

.site-header {
  background: #fff;
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand-logo { max-height: 52px; height: auto; }
.brand-tagline { color: #666; font-size: 14px; }

.site-nav {
  background: #3b3b3b;
}
.site-nav .container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 0;
}
.site-nav a { color: #fff; text-decoration: none; font-weight: 500; }
.site-nav a.active { color: #e67e22; }
.site-nav .nav-right { margin-left: auto; display: flex; gap: 18px; }

.site-footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 22px 0;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #e67e22; }




























































/* --- OpenCart compatibility patch (prevents main-site CSS breaking Bootstrap) --- */
#container .container {
  max-width: var(--bs-container-xl, 1320px) !important;
  width: 100% !important;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#container .row {
  margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5) !important;
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5) !important;
}

#container [class^="col-"],
#container [class*=" col-"] {
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
}
/* =========================================================
   PRODUCT PAGE: Mobile Qty + Add to Cart layout
   - Makes Qty label + input full width
   - Button full width
   - Keeps heights consistent
   ========================================================= */
@media (max-width: 576px) {

  /* stack the input-group items */
  #product-info #product .input-group {
    flex-wrap: wrap;
    align-items: stretch;
  }

  /* qty label full width */
  #product-info #product .input-group .input-group-text {
    width: 100%;
    justify-content: center; /* center "Qty" text */
    height: calc(2.875rem + 2px);
    padding-top: 0;
    padding-bottom: 0;
  }

  /* qty input full width */
  #product-info #product #input-quantity {
    width: 100%;
    flex: 0 0 100%;
    height: calc(2.875rem + 2px);
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
  }

  /* add to cart full width */
  #product-info #product #button-cart {
    width: 100%;
    flex: 0 0 100%;
    height: calc(2.875rem + 2px);
    margin-top: 8px;
    border-radius: .5rem;
  }
}
/* =========================================================
   OPENCART CART PAGE: Mobile stacked layout (better)
   - Qty input full width
   - Update/Remove buttons below qty (smaller)
   - Totals full width
   ========================================================= */
@media (max-width: 576px) {

  /* --- Cart table -> stacked cards --- */
  #checkout-cart .table-responsive { border: 0; }
  #checkout-cart table.table { border: 0; }
  #checkout-cart table.table thead { display: none; }

  #checkout-cart table.table tbody tr {
    display: block;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 12px;
    margin: 0 0 12px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  }

  #checkout-cart table.table tbody tr td {
    display: block;
    width: 100%;
    border: 0;
    padding: 8px 0;
  }

  /* Product image */
  #checkout-cart .table img {
    max-width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 8px;
    border-radius: 10px;
  }

  /* Product name */
  #checkout-cart table.table tbody tr td a {
    font-weight: 700;
    text-decoration: none;
  }

  /* --- Qty area: input full width --- */
  #checkout-cart input[name*="[quantity]"] {
    width: 100% !important;
    text-align: center;
    height: 44px;
    border-radius: 10px;
  }

  /* IMPORTANT: Make input-group stack */
  #checkout-cart .input-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* Put buttons under qty and make them smaller */
  #checkout-cart .input-group .btn,
  #checkout-cart .btn-group .btn {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
  }

  /* Ensure the qty input stays above buttons */
  #checkout-cart .input-group .form-control {
    order: 1;
  }

  /* Update/Remove buttons follow under input */
  #checkout-cart .input-group .btn {
    order: 2;
  }

  /* --- Price + Total labels (optional clarity) --- */
  #checkout-cart table.table tbody tr td:nth-child(4)::before {
    content: "Price";
    display: block;
    font-size: 12px;
    color: #777;
    margin-bottom: 2px;
  }

  #checkout-cart table.table tbody tr td:nth-child(5)::before {
    content: "Total";
    display: block;
    font-size: 12px;
    color: #777;
    margin-bottom: 2px;
  }

  #checkout-cart table.table tbody tr td:nth-child(4),
  #checkout-cart table.table tbody tr td:nth-child(5) {
    font-weight: 700;
  }

  /* --- Totals: full width on mobile --- */
  /* This covers most OC4 themes: totals live in a right column */
  #checkout-cart .row > .col-md-4,
  #checkout-cart .row > .col-lg-4,
  #checkout-cart .row > .col-sm-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Make the totals table full width and readable */
  #checkout-cart .table-bordered,
  #checkout-cart .table.table-bordered {
    width: 100% !important;
    margin-top: 10px;
  }

  /* Buttons at bottom (continue/checkout) stack full width */
  #checkout-cart .buttons a.btn,
  #checkout-cart .buttons button.btn,
  #checkout-cart .buttons input.btn {
    width: 100%;
    margin: 6px 0;
    border-radius: 12px;
    padding: 12px 14px;
  }
}
/* Cart qty input not stretching full width (override size attribute / bootstrap sizing) */
@media (max-width: 576px) {
  #checkout-cart .input-group .form-control,
  #checkout-cart input[name*="[quantity]"] {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    display: block !important;
    min-width: 0 !important;
  }
}
@media (max-width: 576px) {
  #checkout-cart table.table tbody tr td {
    max-width: none !important;
  }
}

/* =========================================================
   CART: Fix Sub-Total/Total (tfoot) being turned into narrow "cards"
   - Force full width rows
   - Put title ABOVE the value
   - Add right padding so value isn't jammed to the edge
   ========================================================= */
@media (max-width: 576px) {

  /* Ensure the cart table itself can be full width */
  #checkout-cart #output-cart table {
    width: 100% !important;
  }

  /* Totals section full width */
  #checkout-cart tfoot#checkout-total {
    display: block !important;
    width: 100% !important;
  }

  /* Each totals row is a full-width card */
  #checkout-cart tfoot#checkout-total tr {
    display: flex !important;
    flex-direction: column;      /* stack label above value */
    width: 100% !important;

    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 10px 12px;
    margin: 10px 0 0 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  }

  /* Reset td styling */
  #checkout-cart tfoot#checkout-total td {
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Title (Sub-Total / Total) above */
  #checkout-cart tfoot#checkout-total td:first-child {
    font-weight: 700;
    text-align: right !important; /* title above, aligned with value */
    margin-bottom: 4px;
    padding-right: 12px !important; /* match value right padding */
  }

  /* Value below, right aligned with right padding */
  #checkout-cart tfoot#checkout-total td:last-child {
    font-weight: 700;
    text-align: right !important;
    padding-right: 12px !important; /* space from right edge */
  }
}
/* CART: qty input full width, but Update/Delete buttons 50/50 side-by-side */
@media (max-width: 576px) {

  /* keep stack layout */
  #checkout-cart #output-cart .input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  /* qty stays full width */
  #checkout-cart #output-cart .input-group .form-control {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* buttons row: 2 columns */
  #checkout-cart #output-cart .input-group .btn {
    width: 50% !important;
    flex: 0 0 calc(50% - 4px) !important; /* accounts for the gap */
    height: 40px;
    font-size: 14px;
    border-radius: 10px;
  }

  /* make the two buttons sit next to each other */
  #checkout-cart #output-cart .input-group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* ensure input is on its own row above the buttons */
  #checkout-cart #output-cart .input-group .form-control {
    flex-basis: 100% !important;
  }

  /* buttons come on next row */
  #checkout-cart #output-cart .input-group button.btn,
  #checkout-cart #output-cart .input-group a.btn {
    flex-basis: calc(50% - 4px) !important;
  }
}