/* ===================================================================
   COLOURS & GLOBAL TYPE
   ================================================================ */

:root {
  --treno-oat:        #E8E9E3;
  --treno-lightgreen: #AEBC95;
  --treno-midgreen:   #5C7C55;
  --treno-darkgreen:  #313D31;
  --treno-darkgreen-hover: #253027;
  --treno-mustard:    #D3A02D;
  --treno-red:        #BC2E2E;
}

body {
  font-family: 'Montserrat', Arial, sans-serif;
  color: #313131;
}

h1, h2, h3, h4 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  text-transform: none;
}

.treno-heading-caps {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.treno-section-title {
  font-size: 1.8rem;
  font-weight: 800;
}

/* default eyebrow */
.treno-eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--treno-midgreen);
}


/* ===================================================================
   HERO BAND
   ================================================================ */

/* Helix uses id="sp-hero" on BOTH section and inner column.
   We only want the SECTION to have the background. */
section#sp-hero {
  position: relative;
  background-color: var(--treno-oat); /* fallback */
  background-image: url("/images/treno-web-design/Treno_Green_FruitVege.webp");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4rem 0;
  min-height: 420px;
}

/* Kill any background on the inner column div with the same id */
div#sp-hero {
  background: none !important;
  padding: 0;          /* let .treno-hero handle spacing */
  min-height: 0;
}

/* Dark-to-transparent gradient OVER the image for legibility */
section#sp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 40%,
    rgba(0, 0, 0, 0.0) 75%
  );
  z-index: 0;
}

/* Inner content – sits above the gradient, no background */
section#sp-hero .treno-hero {
  position: relative;
  z-index: 1;
  padding: 4rem 0;
  background: none !important;
}

/* hero text */
section#sp-hero .treno-eyebrow {
  color: #ffffff;
}

section#sp-hero .treno-hero-title {
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  color: #ffffff;
}

section#sp-hero .treno-hero-subtitle {
  margin-top: 1.6rem;
  font-size: 1.1rem;
  font-weight: 500;
  max-width: 30rem;
  color: #ffffff;
}

/* CTAs */
section#sp-hero .treno-hero-ctas {
  margin-top: 2rem;
}

section#sp-hero .treno-hero-ctas .btn {
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Responsive */
@media (max-width: 991px) {
  section#sp-hero {
    background-position: center;
    background-size: cover;
    padding: 3rem 0;
    min-height: 0;
  }
}


/* ===================================================================
   BUTTONS
   ================================================================ */

.btn-treno-primary,
.btn-treno-secondary {
  border-radius: 999px;
  padding: 0.8rem 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* global defaults (outside hero) */
.btn-treno-primary {
  background-color: var(--treno-darkgreen);
  color: #ffffff !important;
  border: none;
}

.btn-treno-secondary {
  background-color: transparent;
  color: var(--treno-darkgreen) !important;
  border: 2px solid var(--treno-darkgreen);
}

/* hero overrides – white pill & white outline */
section#sp-hero .btn-treno-primary {
  background-color: #ffffff;
  color: var(--treno-darkgreen) !important;
  border: 2px solid #ffffff;
}

section#sp-hero .btn-treno-secondary {
  background-color: transparent;
  color: #ffffff !important;
  border: 2px solid #ffffff;
}

.btn-treno-primary:hover,
.btn-treno-secondary:hover {
  opacity: 0.9;
  text-decoration: none;
}

/* ===================================================================
   FEATURES ICON STRIP (below hero)
   ================================================================ */

/* SECTION background + headroom under hero */
section#sp-features {
  position: relative;
  background-color: var(--treno-oat);
  padding: 4.5rem 0 3.5rem;
  overflow: hidden;
}

/* kill Helix's inner div background */
div#sp-features {
  background: none !important;
  padding: 0;
}

/* wrapper for curve + icons */
.treno-features {
  position: relative;
}


/* keep icons above the line */
.treno-features-row {
  position: relative;
  z-index: 1;
}

/* Individual feature */
.treno-feature {
  text-align: center;
  margin-bottom: 2rem;
}

/* ICONS – use supplied PNGs */
.treno-feature-icon {
  margin: 0 auto 1.2rem;
  max-width: 135px;
}

.treno-feature-icon img {
  display: block;
  width: 100%;
  height: auto;
}

/* Headline – EXTRA BOLD CAPS */
.treno-feature-title {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: var(--treno-darkgreen);
}

/* Subtext – bigger, tighter, forced to wrap */
.treno-feature-text {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  font-size: 0.95rem;       /* ↑ bigger */
  line-height: 1.25;        /* tighter */
  max-width: 6rem;          /* narrow block so ALL phrases wrap */
  margin: 0.3rem auto 0;
  color: var(--treno-darkgreen);
}

/* Responsive tweaks */
@media (max-width: 767px) {
  section#sp-features {
    padding: 3rem 0 2.5rem;
  }

  .treno-features::before {
    top: 3.6rem;
    background-size: 115% auto;
  }
}

@media (max-width: 575px) {
  .treno-features::before {
    display: none;    /* hide curve on tiny screens if cramped */
  }
}

/* ===== FAST & FREE SECTION ===== */

/* Oat background for the whole band */
section#sp-fastfree,
section#sp-fast-free {
  background-color: var(--treno-oat);
  padding: 3.5rem 0 5rem;   /* slightly tighter to the section above */
}

/* Inner wrapper */
.treno-fastfree {
  max-width: 1140px;
  margin: 0 auto;
}

.treno-fastfree-title {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

/* Cards themselves in oat colour rather than white */
.fastfree-card {
  position: relative;
  background: var(--treno-oat);
  border-radius: 26px;
  border: 2px solid var(--treno-darkgreen);
  padding: 2.5rem 2.75rem 4.25rem;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.08);
}

.fastfree-card + .fastfree-card {
  margin-top: 2rem;
}

@media (max-width: 991px) {
  .fastfree-card {
    margin-bottom: 2.5rem;
  }
}

/* Card heading: "Suppliers" / "Buyers" + divider line */
.fastfree-card-heading {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;              /* semi-bold */
  letter-spacing: 0.04em;
  text-transform: none;
  margin: 0 0 1.3rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--treno-midgreen);   /* divider under heading */
}

/* List wrapper (no extra gap – heading handles spacing) */
.fastfree-list {
  margin-top: 0;
}

/* Darker green divider lines between items */
.fastfree-item + .fastfree-item {
  border-top: 1px solid var(--treno-midgreen);
  margin-top: 1.3rem;
  padding-top: 1.3rem;
}

/* Header row (title + chevron) */
.fastfree-item-header {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  cursor: pointer;
  text-align: left;
}

/* Item title: small caps with tracking */
.fastfree-item-title {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--treno-darkgreen);
}

.fastfree-chevron {
  flex: 0 0 auto;
  margin-left: 1rem;
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.fastfree-item.is-open .fastfree-chevron {
  transform: rotate(180deg);
}

/* Body copy (toggled) */
.fastfree-body {
  display: none;
  margin-top: 0.45rem;         /* tighter to heading */
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #313131;
}

/* Open by default for items that have .is-open */
.fastfree-item.is-open .fastfree-body {
  display: block;
}

/* CTAs inside cards */
.fastfree-cta {
  margin-top: 2.2rem;
}

/* Imagery – lettuce and tomato */
.fastfree-image {
  position: absolute;
  z-index: 2;
}

/* Cos lettuce bottom-right of Suppliers card */
.fastfree-image-lettuce {
  right: -35px;
  bottom: -75px;
  max-width: 240px;
}

/* Tomato bottom-right of Buyers card */
.fastfree-image-tomato {
  right: -15px;
  bottom: -85px;
  max-width: 170px;
}

/* Tweak imagery on smaller screens */
@media (max-width: 991px) {
  .fastfree-image-lettuce,
  .fastfree-image-tomato {
    right: 10px;
    bottom: -70px;
    max-width: 140px;
  }
}

/* ===================================================================
   SPACING TWEAKS BETWEEN ICON STRIP & FAST & FREE
   ================================================================ */

/* Tighten space between Icons strip and Fast & Free */
section#sp-features {
  padding: 4.5rem 0 2.0rem;   /* was 3.5rem bottom – reduce */
}

section#sp-fastfree,
section#sp-fast-free {
  padding: 2.0rem 0 5rem;     /* was 4rem top – reduce */
}

/* Optional: tighten heading spacing within Fast & Free */
.treno-fastfree-title {
  margin-top: 0;
  margin-bottom: 2rem;
}

/* Tighter, slightly larger icon copy */
.treno-feature-title {
  font-size: 1.0rem;      /* was 0.9rem */
}

.treno-feature-text {
  font-size: 1.0rem;      /* was 0.95rem */
  margin-top: -0.2rem;    /* was 0.3rem – tighter gap under heading */
}

/* ===================================================================
   STATS CARDS
   ================================================================ */

/* Whole band */
section#sp-stats {
  position: relative;
  background-color: var(--treno-oat);
  padding: 4rem 0 4.5rem;
  overflow: hidden;
}

/* Wrapper so we can hang the curve off it later if we want */
.treno-stats {
  position: relative;
}

/* Optional: faint connecting curve behind cards
   (swap the URL for whatever SVG/PNG you end up using) */
.treno-stats::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 54%;
  height: 220px;
  background: url("/images/treno-web-design/Treno_Stats_Curve.svg")
              center center / cover no-repeat;
  opacity: 0.75;
  pointer-events: none;
}

/* Ensure cards sit above the curve */
.treno-stats-row {
  position: relative;
  z-index: 1;
}

/* Base card */
.treno-stat-card {
  border-radius: 26px;
  padding: 2.2rem 2.1rem 2.4rem;
  color: #ffffff;
  text-transform: uppercase;
  font-family: 'Montserrat', Arial, sans-serif;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}

/* Card colours */
.treno-stat-card--light {
  background-color: var(--treno-lightgreen);
}

.treno-stat-card--dark {
  background-color: var(--treno-darkgreen);
}

.treno-stat-card--mustard {
  background-color: var(--treno-mustard);
}

/* Top "OVER" label */
.treno-stat-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  font-weight: 700;
}

/* Big number */
.treno-stat-value {
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 700;
  margin: 0.35rem 0 0.25rem;
  white-space: nowrap;
}

.treno-stat-value span {
  font-size: 2.1rem;
  margin-left: 0.25rem;
}

/* Bottom label */
.treno-stat-label {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  font-weight: 700;
}

/* Spacing on smaller screens */
@media (max-width: 991px) {
  .treno-stat-card {
    margin-bottom: 1.8rem;
    text-align: center;
  }

  .treno-stats::before {
    top: 60%;
    height: 260px;
  }
}

@media (max-width: 575px) {
  .treno-stats::before {
    display: none; /* hide curve if it gets messy */
  }

  .treno-stat-value {
    font-size: 2.6rem;
  }

  .treno-stat-value span {
    font-size: 1.7rem;
  }
}
/* ===================================================================
   TESTIMONIALS BAND
   ================================================================ */

section#sp-testimonials {
  position: relative;
  padding: 4rem 0 4.5rem;
  background: url("/images/treno-web-design/Treno_Yellow_FruitVege.webp")
              center center / cover no-repeat;
  overflow: hidden;
}

/* Darken the background slightly so cards pop */
section#sp-testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

/* Keep cards above overlay */
.treno-testimonials {
  position: relative;
  z-index: 1;
}

/* Individual testimonial card */
.treno-testimonial-card {
  background-color: #ffffff;
  border-radius: 26px;
  padding: 2.1rem 2.4rem 2.3rem;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
  margin-bottom: 2rem;
}

/* Heading line with stars */
.treno-testimonial-title {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.9rem;
  color: var(--treno-darkgreen);
  margin: 0 0 1.1rem;
}

/* Quote text */
.treno-testimonial-quote {
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0 0 1.1rem;
  color: #313131;
}

/* Venue line */
.treno-testimonial-meta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--treno-darkgreen);
  margin: 0;
}

/* Stack nicely on small screens */
@media (max-width: 991px) {
  section#sp-testimonials {
    padding: 3rem 0 3.5rem;
  }

  .treno-testimonial-card {
    margin-bottom: 1.5rem;
  }
}

/* HEADER ====================================================== */

#sp-header {
  background-color: var(--treno-oat);   /* oat strip */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0.6rem 0;
}

/* constrain and align content a little tighter on large screens */
#sp-header .container {
  max-width: 1140px;
}

/* Logo sizing */
#sp-logo .logo img {
  max-height: 32px;
  height: auto;
}

/* Main menu links (including Login / Sign Up) */
#sp-menu .sp-megamenu-parent > li > a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--treno-darkgreen);
  padding: 0.6rem 0 0.6rem 1.6rem;
}

/* subtle hover */
#sp-menu .sp-megamenu-parent > li > a:hover,
#sp-menu .sp-megamenu-parent > li.active > a {
  color: var(--treno-midgreen);
}

/* keep mobile header clean */
@media (max-width: 767px) {
  #sp-header {
    padding: 0.4rem 0;
  }

  #sp-logo .logo img {
    max-height: 28px;
  }

  #sp-menu .sp-megamenu-parent > li > a {
    padding-left: 1rem;
  }
}

/* HEADER MAIN MENU – make LOGIN / SIGN UP bigger */
#sp-header #sp-menu .sp-megamenu-parent > li > a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1rem;    /* try 0.95–1rem, tweak to taste */
  padding-top: 0;        /* keep them vertically tidy */
  padding-bottom: 0;
}


/* CONTACT US BAND ============================================ */

/* Band background + padding */
section#sp-home-bottom-section {
  background-color: var(--treno-oat);
  padding: 4rem 0 4.5rem;
}

/* ------------------------------------------------------------------
   HEADING ("Contact Us") – module title inside #sp-home-bottom
   ------------------------------------------------------------------ */

#sp-home-bottom .sp-module-title {
  position: relative;
  margin: 0 0 1.75rem;
  padding: 0 0 0.75rem;
  border: 0; /* kill any stock Helix border */

  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.9rem;              /* tweak size if you like */
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--treno-darkgreen);
}

/* Single green underline under the heading */
#sp-home-bottom .sp-module-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 380px;                   /* adjust length to taste */
  height: 2px;
  background-color: var(--treno-darkgreen);
}

/* Belt-and-braces: don’t let Helix add its own line */
#sp-home-bottom .sp-module-title::before {
  content: none !important;
}

/* ------------------------------------------------------------------
   RESET OLD TEMPLATE CONTACT LAYOUT
   ------------------------------------------------------------------ */

/* Kill the old 640px max-width + top padding */
section#sp-home-bottom-section .rsform.contct-form {
  max-width: none !important;
  padding-top: 0 !important;
}

/* Make the RSForm "left/right" rows full-width instead of 50/50 */
section#sp-home-bottom-section .rsform.contct-form .rs-left,
section#sp-home-bottom-section .rsform.contct-form .rs-right {
  width: 100% !important;
  float: none !important;
}

/* Force RSForm blocks to use full width in this band */
#sp-home-bottom .rsform-block {
  width: 100% !important;
  float: none !important;
}

/* If RSForm added Bootstrap grid classes inside, neutralise them */
#sp-home-bottom .rsform-block [class*="col-"] {
  width: 100% !important;
  float: none !important;
}

/* ------------------------------------------------------------------
   FIELD STYLING
   ------------------------------------------------------------------ */

section#sp-home-bottom-section .rsform.contct-form input[type="text"],
section#sp-home-bottom-section .rsform.contct-form input[type="email"],
section#sp-home-bottom-section .rsform.contct-form input[type="tel"],
section#sp-home-bottom-section .rsform.contct-form textarea {
  width: 100%;
  background-color: #ffffff;
  border-radius: 999px;
  border: 1px solid #d4d7cf;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: 'Montserrat', Arial, sans-serif;

  /* Make default field text clearly visible */
  color: #333333 !important;
}

/* Textarea softer radius + height */
section#sp-home-bottom-section .rsform.contct-form textarea {
  border-radius: 18px;
  min-height: 150px;
}

/* Labels above fields ("NAME", "EMAIL", "MESSAGE") */
section#sp-home-bottom-section .rsform.contct-form .rsform-block label {
  display: block;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-bottom: 0.35rem;
  color: var(--treno-darkgreen);
}

/* Spacing between rows */
section#sp-home-bottom-section .rsform.contct-form .rsform-block {
  margin-bottom: 1.25rem;
}

/* Submit button */
section#sp-home-bottom-section .rsform.contct-form input[type="submit"],
section#sp-home-bottom-section .rsform.contct-form button[type="submit"] {
  border-radius: 999px;
  border: 0;
  background-color: var(--treno-darkgreen);
  color: #ffffff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 2.8rem;
}

/* ------------------------------------------------------------------
   MAKE NAME / EMAIL / MESSAGE TEXT CLEARLY VISIBLE
   ------------------------------------------------------------------ */

/* True HTML placeholders (if used) */
section#sp-home-bottom-section .rsform.contct-form input::placeholder,
section#sp-home-bottom-section .rsform.contct-form textarea::placeholder {
  color: #333333 !important;
  opacity: 1;
}

/* Mobile stacking tweaks */
@media (max-width: 767px) {
  section#sp-home-bottom-section {
    padding: 3rem 0 3.5rem;
  }
}


/* FOOTER ===================================================== */

footer#sp-footer {
  background-color: var(--treno-darkgreen);
  color: #ffffff;
  padding: 3.5rem 0 2.75rem;
}

/* constrain width a bit like the rest of the site */
footer#sp-footer .container {
  max-width: 1140px;
}

/* logo column */
#sp-footer-logo .ft-logo img {
  max-height: 32px;
  height: auto;
}

/* link column headings (module titles) */
#sp-footer2 .sp-module-title,
#sp-footer2 h3,
#sp-footer2 h4 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: #ffffff;
  margin-bottom: 0.8rem;
}

/* individual links */
#sp-footer2 a {
  display: block;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #ffffff;
}

#sp-footer2 a:hover {
  color: var(--treno-lightgreen);
}

/* generic text in footer */
#sp-footer p,
#sp-footer li,
#sp-footer span {
  font-size: 0.85rem;
}

/* hide newsletter column just by unpublishing module 135;
   CSS below is just in case the column remains empty */
#sp-footer3:empty {
  display: none;
}

/* mobile: stack footer columns */
@media (max-width: 767px) {
  footer#sp-footer {
    padding: 2.5rem 0 2rem;
  }

  #sp-footer-logo,
  #sp-footer2,
  #sp-footer3 {
    margin-bottom: 2rem;
  }
}
/* ============================
   FOOTER – make text readable
   ============================ */

/* Base text colour in footer */
#sp-footer {
  color: #ffffff;
}

/* All footer links / labels */
#sp-footer a,
#sp-footer p,
#sp-footer li,
#sp-footer .sp-module,
#sp-footer .sp-module-title {
  color: #ffffff;
}

/* Hover state for footer links */
#sp-footer a:hover {
  color: var(--treno-lightgreen); /* or #AEBC95 if vars not available */
}

#sp-footer .footer-links ul li a {
    color: #ffffff !important;
}

/* ===========================
   CONTACT – RSForm on oat bg
   =========================== */

/* Make section left-aligned again and keep our new background */
section#sp-home-bottom-section {
  text-align: left;           /* override template.css center */
}

/* RSForm fields: dark text, white boxes */
.contct-form .formResponsive .formHorizontal input,
.contct-form .formResponsive .formHorizontal textarea {
  color: #1f2a1f !important;                 /* dark green text */
  background-color: #ffffff !important;      /* white field */
  border-radius: 24px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 0.8rem 1.4rem !important;
  box-shadow: none !important;
}

/* Placeholders – readable on white */
.contct-form ::placeholder,
.contct-form ::-webkit-input-placeholder,
.contct-form ::-moz-placeholder,
.contct-form :-ms-input-placeholder {
  color: #888888 !important;
  opacity: 1 !important;
}
/* CONTACT heading styling */
#sp-home-bottom-left .sp-module-content {
  color: var(--treno-darkgreen);
}

#sp-home-bottom-left .custom h3 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: none;
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--treno-darkgreen);
}

/* ============================================================
   FONT STANDARDIZATION – OVERRIDE TO MONTSERRAT
   ============================================================ */

/* Override TT Travels with Montserrat */
* {
  font-family: 'Montserrat', Arial, sans-serif !important;
}

/* Override any serif fonts (PTSans-Bold, etc.) with Montserrat */
[style*="font-family: serif"],
[style*="font-family: PTSans"],
[style*="font-family: PT Sans"],
[style*="font-family: 'serif'"],
[style*="font-family: \"serif\""] {
  font-family: 'Montserrat', Arial, sans-serif !important;
}

/* Keep icon fonts working (FontAwesome, IcoMoon) */
.fa, .fas, .far, .fab, .fal,
[class*="icon-"],
.glyphicon,
i.fa, i.fas, i.far, i.fab, i.fal {
  font-family: 'FontAwesome', 'IcoMoon' !important;
}

/* ===================================================================
   CUSTOM OFF-CANVAS MENU & CATEGORY FILTER DRAWER FIXES FOR iOS
   ================================================================ */

/* ===================================================================
   1. OFF-CANVAS MENU: FULL-SCREEN OVERLAY & iOS FIXES
   ================================================================ */

/* Lock background scroll when off-canvas is open */
html.offcanvas-open,
body.offcanvas-open {
    overflow: hidden !important;
    max-width: 100vw !important;
    position: fixed !important;
    width: 100% !important;
}

/* Off-canvas drawer: FULL-SCREEN OVERLAY (not sidebar) */
.offcanvas-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    /* Dynamic viewport height for mobile */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    /* Smooth scrolling on iOS */
    background-color: #fff !important;
    /* White full-screen background */

    /* Safe area insets for iOS notch/home indicator */
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
}

/* For .full-screen-ftop animation style - FULL SCREEN */
.full-screen-ftop .offcanvas-menu {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: #fff !important;
}

.full-screen-ftop .offcanvas-menu .offcanvas-inner {
    height: auto !important;
    /* Override fixed height */
    min-height: 100% !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 30px) !important;
    background: #fff !important;
    /* Ensure white background */
}

/* Close button: fixed in top right corner, always visible ABOVE scrolling content */
.offcanvas-menu .close-offcanvas {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 10002 !important;
    /* Higher than menu content */
    opacity: 1 !important;
    /* Override template.css line 4000 opacity:0 */
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    font-size: 32px !important;
    line-height: 1 !important;
    color: #000 !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    /* Ensure it stays on top while menu scrolls */
    margin: 0 !important;
    padding: 0 !important;
}

.full-screen-ftop .offcanvas-menu .close-offcanvas {
    opacity: 1 !important;
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 10002 !important;
    background: transparent !important;
    color: #000 !important;
}

/* ===================================================================
   2. MENU ITEM ORDER FIX (TABLET/MOBILE)
   ================================================================ */

/* Fix menu item order - template.css line 4003-4005 uses CSS Grid with order property
   which reorders items incorrectly. Reset to natural DOM order from Joomla. */

/* Override template's CSS Grid ordering - use natural order instead */
.full-screen-off-canvas-ftop.ltr .offcanvas-menu .sp-module ul>li:first-child {
    order: 0 !important;
    /* Reset template.css line 4004 */
}

.full-screen-off-canvas-ftop.ltr .offcanvas-menu .sp-module ul>li:nth-child(2) {
    order: 0 !important;
    /* Reset template.css line 4005 */
}

/* Reset all menu items to use natural order */
.full-screen-off-canvas-ftop.ltr .offcanvas-menu .sp-module ul>li {
    order: 0 !important;
}

/* ===================================================================
   3. BOOTSTRAP COLLAPSE FIX FOR "MY ACCOUNT" MENU
   ================================================================ */

/* Restore Bootstrap collapse behavior (override template.css line 1681, 4008) */
.offcanvas-menu .collapse {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

.offcanvas-menu .collapse.in {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}

/* Override .full-screen-ftop template.css line 1681-1682 that forces nested items visible */
.full-screen-ftop .offcanvas-menu .offcanvas-inner .sp-module ul li ul li {
    display: none !important;
}

/* Allow visible when parent collapse is open */
.full-screen-ftop .offcanvas-menu .offcanvas-inner .sp-module ul li ul.collapse.in li {
    display: block !important;
}

/* Override template.css line 4008 that forces .collapse to always display */
.full-screen-off-canvas-ftop.ltr .offcanvas-menu .sp-module li.parent ul.collapse {
    display: none !important;
    height: 0 !important;
}

.full-screen-off-canvas-ftop.ltr .offcanvas-menu .sp-module li.parent ul.collapse.in {
    display: block !important;
    height: auto !important;
    margin-bottom: 60px !important;
}

/* ===================================================================
   3. CHEVRON/TOGGLER VISIBILITY & STATE
   ================================================================ */

/* Parent menu item - use flexbox to center link and chevron together as a unit */
.offcanvas-menu .offcanvas-inner .sp-module ul>li.parent {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Parent link - inline element, no special positioning */
.offcanvas-menu .offcanvas-inner .sp-module ul>li.parent>a {
    display: inline-block !important;
    position: relative !important;
    padding-right: 0 !important;
    /* No extra padding */
}

/* Chevron - inline element right next to the link, flows naturally */
.offcanvas-menu .offcanvas-inner .sp-module ul>li.parent .offcanvas-menu-toggler {
    display: inline-block !important;
    /* Override template.css line 3998 display:none */
    position: relative !important;
    /* Not absolute - flows inline with link */
    margin-left: 8px !important;
    /* Small gap from link text */
    padding: 10px !important;
    vertical-align: middle !important;
}

.full-screen-ftop .offcanvas-menu .offcanvas-inner .sp-module ul li .offcanvas-menu-toggler {
    display: inline-block !important;
    color: #559945 !important;
    /* Match green theme */
    position: relative !important;
    padding: 10px !important;
    vertical-align: middle !important;
}

/* Submenu - full width, centered text */
.offcanvas-menu .offcanvas-inner .sp-module ul>li.parent>ul.collapse {
    width: 100% !important;
    text-align: center !important;
}

/* Icon state: collapsed shows open-icon, expanded shows close-icon */
.offcanvas-menu .offcanvas-inner .sp-module ul>li .offcanvas-menu-toggler .open-icon {
    display: none;
}

.offcanvas-menu .offcanvas-inner .sp-module ul>li .offcanvas-menu-toggler .close-icon {
    display: inline;
}

.offcanvas-menu .offcanvas-inner .sp-module ul>li .offcanvas-menu-toggler.collapsed .open-icon {
    display: inline;
}

.offcanvas-menu .offcanvas-inner .sp-module ul>li .offcanvas-menu-toggler.collapsed .close-icon {
    display: none;
}

/* ===================================================================
   4. REMOVE GREEN BUTTON BORDERS FROM SUBMENU ITEMS
   ================================================================ */

/* Remove green button styling from submenu items (override template.css line 4010) */
.full-screen-ftop .offcanvas-menu .offcanvas-inner .sp-module ul li ul li a {
    border: none !important;
    padding: 10px 4px !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: center !important;
    /* Center align like parent items */
    background: transparent !important;
    display: block !important;
}

/* Keep child items centered, no left indent */
.full-screen-ftop .offcanvas-menu .offcanvas-inner .sp-module ul li ul li {
    margin-bottom: 8px !important;
    padding-left: 0 !important;
    /* Remove left padding */
    padding-right: 0 !important;
}

/* Make submenu text lighter/smaller than parent */
.full-screen-ftop .offcanvas-menu .offcanvas-inner .sp-module ul li ul li a {
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 0.85;
}

/* Hover state for submenu items (no green button effect) */
.full-screen-ftop .offcanvas-menu .offcanvas-inner .sp-module ul li ul li a:hover {
    background: rgba(85, 153, 69, 0.1) !important;
    color: #559945 !important;
}

/* ===================================================================
   5. CATEGORY FILTER DRAWER: FULL-SCREEN OVERLAY LIKE OFF-CANVAS MENU
   ================================================================ */

/* Lock background scroll when category filter is open */
html.filter-drawer-open,
body.filter-drawer-open {
    overflow: hidden !important;
    max-width: 100vw !important;
    position: fixed !important;
    width: 100% !important;
}

/* Category filter drawer: FULL-SCREEN OVERLAY below page header */
.mod-sellacious-filters.slide,
.snap-in-mod-sellacious-filters.slide {
    position: fixed !important;
    top: 80px !important;
    /* Start below page header (adjust if header height changes) */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: calc(100vh - 80px) !important;
    /* Minimum height for iOS */
    height: calc(100vh - 80px) !important;
    /* Fixed height for iOS compatibility - override filters.css line 843 */
    max-height: calc(100dvh - 80px) !important;
    /* Dynamic viewport for modern browsers */
    background-color: #fff !important;
    overflow-y: scroll !important;
    /* Force scrollbar to always show scroll capability */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 70px 20px 100px 20px !important;
    /* Top padding for close button area, bottom for action buttons */
    box-sizing: border-box !important;
}

/* Ensure inner content doesn't have height restrictions */
.mod-sellacious-filters.slide > *,
.mod-sellacious-filters.slide .filter-head,
.mod-sellacious-filters.slide form {
    max-height: none !important;
}

/* Close button area: Fixed at top */
.mod-sellacious-filters.slide .filter-head {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10004 !important;
    background: #fff !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid #ececec !important;
    height: 60px !important;
    box-sizing: border-box !important;
}

/* Close button inside filter-head */
.mod-sellacious-filters.slide .filter-head #filters-close {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    font-size: 28px !important;
    line-height: 40px !important;
    color: #000 !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    text-align: center !important;
    z-index: 10005 !important;
}

/* Action buttons (Apply & Clear): FIXED FOOTER at bottom - only when drawer open */
.mod-sellacious-filters.slide .filter-action-buttons {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10004 !important;
    background: #fff !important;
    padding: 15px 20px !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px solid #ececec !important;
    min-height: 70px !important;
    box-sizing: border-box !important;
    padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important;
}

/* Ensure buttons are full-width on mobile */
.mod-sellacious-filters .filter-action-buttons button,
.mod-sellacious-filters .btn-main button {
    flex: 1 !important;
    margin: 0 !important;
    height: 44px !important;
    /* Touch-friendly button height */
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Hide duplicate button sections (keep only bottom sticky one) */
.mod-sellacious-filters form>.btn-main:first-of-type {
    display: none !important;
}

/* Remove ALL nested scrollbars - only main wrapper should scroll */
.mod-sellacious-filters.slide .filter-choices {
    max-height: none !important;
    /* Override filters.css line 200 */
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Ensure category lists don't create their own scrollbars */
.mod-sellacious-filters.slide .filter-cat-list ul,
.mod-sellacious-filters.slide .filter-cat-list ul ul {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}

/* Ensure filter content sections expand naturally without creating nested scrollbars */
.mod-sellacious-filters.slide .sellacious-filters-wrapper .filter-snap-in,
.mod-sellacious-filters.slide .sellacious-filters-wrapper .filter-cat-list,
.mod-sellacious-filters.slide .sellacious-filters-wrapper .search-filter,
.mod-sellacious-filters.slide .sellacious-filters-wrapper .filter-con-list,
.mod-sellacious-filters.slide .sellacious-filters-wrapper .filter-shipping-options,
.mod-sellacious-filters.slide .sellacious-filters-wrapper .filter-shop-locations,
.mod-sellacious-filters.slide .sellacious-filters-wrapper .filter-shop-name-list,
.mod-sellacious-filters.slide .sellacious-filters-wrapper .filter-spl-categories-list,
.mod-sellacious-filters.slide .sellacious-filters-wrapper .filter-stock,
.mod-sellacious-filters.slide .sellacious-filters-wrapper .filter-store,
.mod-sellacious-filters.slide .sellacious-filters-wrapper .filter-price-area {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

/* ===================================================================
   6. MOBILE-SPECIFIC FIXES (VIEWPORT CLAMPING)
   ================================================================ */

/* Both off-canvas menu and filter drawer are now full-screen */
/* No width clamping needed */

/* ===================================================================
   7. PREVENT BODY SCROLL WHEN DRAWERS OPEN (FALLBACK)
   ================================================================ */

/* Additional body lock for iOS Safari quirks */
body.offcanvas-open .body-wrapper,
body.filter-drawer-open .body-wrapper {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
}

/* ===================================================================
   8. ENSURE NO HORIZONTAL SCROLL OR PINCH-ZOOM ISSUES
   ================================================================ */

.offcanvas-menu *,
.mod-sellacious-filters.slide * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent text from causing overflow */
.offcanvas-menu .offcanvas-inner,
.mod-sellacious-filters .sellacious-filters-wrapper {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* HEADER DROPDOWN (LOGIN / SIGN UP sub-items)
   ========================================== */

/* Position + container for the dropdown box */
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown {
  margin-top: 0;              /* sit tight under the parent item */
}

#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown-inner {
  padding: 0.35rem 0;
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  min-width: 180px;           /* stop it getting too narrow */
}

/* Individual dropdown links */
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown li a {
  display: block;
  padding: 0.55rem 1.4rem;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--treno-darkgreen);
  white-space: nowrap;        /* keep each item on one line */
  background: transparent;
  border: 0;
}

/* Hover state */
#sp-header #sp-menu .sp-megamenu-parent .sp-dropdown li a:hover {
  background: var(--treno-oat);
  color: var(--treno-darkgreen);
}
/* =========================================================
   SCROLLBAR – Treno brand
   (WebKit/Blink + Firefox)
   ====================================================== */

/* Chrome / Edge / Safari */
html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
html::-webkit-scrollbar-track {
  background-color: var(--treno-oat);          /* light oat background */
}

/* Thumb */
html::-webkit-scrollbar-thumb {
  background-color: var(--treno-darkgreen);    /* main dark green */
  border-radius: 999px;
  border: 2px solid var(--treno-oat);          /* oat ring around thumb */
}

/* Thumb hover */
html::-webkit-scrollbar-thumb:hover {
  background-color: var(--treno-darkgreen-hover);
}

/* Firefox */
html {
  scrollbar-width: thin;                                           /* 'auto' | 'thin' */
  scrollbar-color: var(--treno-darkgreen) var(--treno-oat);        /* thumb track */
}

/* ============================================================
   STATUS / CONNECTION CTAs – USE TREN0 MUSTARD
   ============================================================ */

/* Store header: "Connection pending" badge / button */
.badge-pending {
  background: var(--treno-mustard) !important;
  border-color: var(--treno-mustard) !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* Product page: orange "Connect to order" notice under price */
.connection-required-notice {
  background: var(--treno-mustard) !important;
  border-color: var(--treno-mustard) !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* Single product page: Add to Cart button (keep list/grid ones green) */
.product-single .btn-cart.btn-add-cart,
.product-single button.ctech-btn-warning.btn-cart.btn-add-cart {
  background: var(--treno-mustard) !important;
  border-color: var(--treno-mustard) !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* Make sure any text/icons inside those CTAs stay white */
.badge-pending a,
.connection-required-notice a,
.product-single .btn-cart.btn-add-cart span,
.product-single .btn-cart.btn-add-cart i {
  color: #ffffff !important;
}

/* =========================================================
   TRENO BRAND RE-COLOURING – BUTTONS, FILTERS, MENUS, CART
   ====================================================== */

/* 1. SEARCH BUTTON (marketplace search bar) */
#search_btn,
button.search-btn {
  background-color: var(--treno-midgreen);
  border-color: var(--treno-midgreen);
  color: #ffffff;
}
#search_btn:hover,
button.search-btn:hover {
  background-color: var(--treno-darkgreen);
  border-color: var(--treno-darkgreen);
}

/* 2. "SHOP BY CATEGORY" FILTER TOGGLE */
#filters-toggle,
.filter-icon .ctech-btn-primary {
  background-color: var(--treno-midgreen) !important;
  border-color: var(--treno-midgreen) !important;
  color: #ffffff !important;
}
#filters-toggle:hover,
.filter-icon .ctech-btn-primary:hover {
  background-color: var(--treno-darkgreen) !important;
  border-color: var(--treno-darkgreen) !important;
}

/* 4. APPLY & CLEAR FILTER BUTTONS (left filter panel) */
.filter-btns-inner .apply a,
span.apply a {
  display: inline-block;
  padding: 0.6rem 1.8rem;
  background-color: var(--treno-midgreen);
  border: 1px solid var(--treno-midgreen);
  color: #ffffff !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.filter-btns-inner .apply a:hover,
span.apply a:hover {
  background-color: var(--treno-darkgreen);
  border-color: var(--treno-darkgreen);
}

/* 5. INNER SCROLLBAR FOR CATEGORY FILTER + ARROWS (WebKit) */
.filter-cat-contents,
.filter-cat-list {
  scrollbar-color: var(--treno-darkgreen) #dcded6; /* Firefox */
}

/* Chrome / Edge / Safari */
.filter-cat-contents::-webkit-scrollbar,
.filter-cat-list::-webkit-scrollbar {
  width: 8px;
}
.filter-cat-contents::-webkit-scrollbar-track,
.filter-cat-list::-webkit-scrollbar-track {
  background: #dcded6;
}
.filter-cat-contents::-webkit-scrollbar-thumb,
.filter-cat-list::-webkit-scrollbar-thumb {
  background-color: var(--treno-darkgreen);
  border-radius: 999px;
}
.filter-cat-contents::-webkit-scrollbar-button,
.filter-cat-list::-webkit-scrollbar-button {
  background-color: var(--treno-darkgreen);
}

/* (Chevron icons inside the filter panel, where present) */
.filter-cat-contents .fa-chevron-up,
.filter-cat-contents .fa-chevron-down,
.filter-cat-contents .fa-angle-up,
.filter-cat-contents .fa-angle-down {
  color: var(--treno-darkgreen);
}

/* 6. EDIT PROFILE / MANAGE ADDRESSES BUTTONS */
.profile-buttons .ctech-btn-primary,
.profile-buttons .ctech-btn-success {
  background-color: var(--treno-midgreen) !important;
  border-color: var(--treno-midgreen) !important;
  color: #ffffff !important;
}
.profile-buttons .ctech-btn-primary:hover,
.profile-buttons .ctech-btn-success:hover {
  background-color: var(--treno-darkgreen) !important;
  border-color: var(--treno-darkgreen) !important;
}

/* 7. ADD TO CART BUTTONS (product tiles) */
.product-list-block .cart-button-container button,
.product-list-block .cart-button-container .ctech-btn,
.product-list-block .cart-button-container .btn-add-cart {
  background-color: var(--treno-midgreen) !important;
  border-color: var(--treno-midgreen) !important;
  color: #ffffff !important;
}
.product-list-block .cart-button-container button:hover,
.product-list-block .cart-button-container .ctech-btn:hover,
.product-list-block .cart-button-container .btn-add-cart:hover {
  background-color: var(--treno-darkgreen) !important;
  border-color: var(--treno-darkgreen) !important;
}

/* 8. CART PAGE BUTTONS (CHECKOUT, APPLY PROMO, CONTINUE SHOPPING) */
.cart-buttons .ctech-btn-success,
.cart-buttons .checkout-btn,
.cart-final-pricing .ctech-btn-success,
#cart-items-list .ctech-btn-success,
#cart-items-list .ctech-btn-primary {
  background-color: var(--treno-midgreen) !important;
  border-color: var(--treno-midgreen) !important;
  color: #ffffff !important;
}
.cart-buttons .ctech-btn-success:hover,
.cart-buttons .checkout-btn:hover,
.cart-final-pricing .ctech-btn-success:hover,
#cart-items-list .ctech-btn-success:hover,
#cart-items-list .ctech-btn-primary:hover {
  background-color: var(--treno-darkgreen) !important;
  border-color: var(--treno-darkgreen) !important;
}

/* 9. LOGIN / ACCOUNT LINK COLOURING (system pages) */
.view-login a,
.view-registration a,
.view-remind a,
.view-reset a,
.com_users a {
  color: var(--treno-midgreen);
}
.view-login a:hover,
.view-registration a:hover,
.view-remind a:hover,
.view-reset a:hover,
.com_users a:hover {
  color: var(--treno-darkgreen);
}

/* ============================================================
   MOBILE OFF-CANVAS MENU – USE HEADER GREEN
   ============================================================ */

@media (max-width: 991px) {
  /* Main off-canvas menu links */
  .full-screen-ftop .offcanvas-menu .offcanvas-inner .sp-module ul li a {
    color: var(--treno-darkgreen) !important; /* #313D31 */
  }

  /* Hover / active state */
  .full-screen-ftop .offcanvas-menu .offcanvas-inner .sp-module ul li a:hover,
  .full-screen-ftop .offcanvas-menu .offcanvas-inner .sp-module ul li.current > a {
    color: var(--treno-midgreen) !important; /* optional subtle highlight */
  }

  /* Chevrons for deeper / parent items in the off-canvas menu */
  .full-screen-ftop .offcanvas-menu .offcanvas-inner .sp-module
  ul li.deeper.parent > a:after {
    border-color: var(--treno-darkgreen) !important;
  }
}
/* Off-canvas "Apply" button (mobile filters) */
.mod-sellacious-filters.slide .filter-btns-footer .filter-btns-inner .apply a {
  background-color: var(--treno-midgreen) !important; /* default */
  color: #ffffff !important;
  border-color: var(--treno-midgreen) !important;
}

/* Hover / active state */
.mod-sellacious-filters.slide .filter-btns-footer .filter-btns-inner .apply a:hover,
.mod-sellacious-filters.slide .filter-btns-footer .filter-btns-inner .apply a:focus {
  background-color: var(--treno-darkgreen) !important;
  border-color: var(--treno-darkgreen) !important;
  color: #ffffff !important;
}

/* =========================================================
   CHECKOUT: APPLY / NEXT / PROCEED / PLACE ORDER + STEPS
   ====================================================== */

/* 1. Promo-code APPLY button on cart / summary */
.cart-items-promo .btn-apply-coupon,
.cart-aio-summary .btn-apply-coupon,
.ctech-wrapper .btn-apply-coupon {
  background-color: var(--treno-midgreen) !important;
  border-color: var(--treno-midgreen) !important;
  color: #ffffff !important;
}
.cart-items-promo .btn-apply-coupon:hover,
.cart-aio-summary .btn-apply-coupon:hover,
.ctech-wrapper .btn-apply-coupon:hover {
  background-color: var(--treno-darkgreen) !important;
  border-color: var(--treno-darkgreen) !important;
}

/* 2. Wizard step circles (1–5) & chevrons when step is reached/visited */
.cart-aio-steps .steps li.visited .step-icon,
.cart-aio-steps .steps li.current .step-icon,
.wizard .steps li.visited .step-icon,
.wizard .steps li.current .step-icon {
  background-color: var(--treno-midgreen) !important;
  border-color: var(--treno-midgreen) !important;
  color: #ffffff !important;
}

.cart-aio-steps .steps li.visited .chevron,
.cart-aio-steps .steps li.current .chevron,
.wizard .steps li.visited .chevron,
.wizard .steps li.current .chevron {
  border-left-color: var(--treno-midgreen) !important;
}

/* 3. Small circular right-arrow icon in the multi-step flow */
.checkoutform-editor .fa-arrow-right,
.cart-aio-checkoutform .fa-arrow-right {
  color: #ffffff !important;                 /* arrow itself */
}
.checkoutform-editor .btn-next.ctech-btn-primary,
.cart-aio-checkoutform .btn-next.ctech-btn-primary {
  background-color: var(--treno-midgreen) !important;
  border-color: var(--treno-midgreen) !important;
}
.checkoutform-editor .btn-next.ctech-btn-primary:hover,
.cart-aio-checkoutform .btn-next.ctech-btn-primary:hover {
  background-color: var(--treno-darkgreen) !important;
  border-color: var(--treno-darkgreen) !important;
}

/* 4. Generic primary checkout actions
      - “Next”
      - “Proceed to Checkout”
      - “Place Order”
      - other ctech primary buttons inside checkout wrapper     */
.cart-aio-container .ctech-btn-primary,
.checkoutform-editor .ctech-btn-primary,
.ctech-wrapper .ctech-btn-primary.btn-pay-now {
  background-color: var(--treno-midgreen) !important;
  border-color: var(--treno-midgreen) !important;
  color: #ffffff !important;
}
.cart-aio-container .ctech-btn-primary:hover,
.checkoutform-editor .ctech-btn-primary:hover,
.ctech-wrapper .ctech-btn-primary.btn-pay-now:hover {
  background-color: var(--treno-darkgreen) !important;
  border-color: var(--treno-darkgreen) !important;
}

/* 5. Final “Place Order” button (safety net if it’s styled slightly differently) */
.ctech-wrapper .ctech-btn-primary.btn-pay-now,
.ctech-wrapper button.ctech-btn-primary.btn-pay-now {
  background-color: var(--treno-midgreen) !important;
  border-color: var(--treno-midgreen) !important;
}
.ctech-wrapper .ctech-btn-primary.btn-pay-now:hover,
.ctech-wrapper button.ctech-btn-primary.btn-pay-now:hover {
  background-color: var(--treno-darkgreen) !important;
  border-color: var(--treno-darkgreen) !important;
}

/* =========================================================
   10. CART BADGE IN MENU
   ====================================================== */
.treno-cart-badge {
    display: inline-block;
    background-color: var(--treno-lightgreen); /* Treno Light Green */
    color: #ffffff;
    border-radius: 10px;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1;
    min-width: 18px;
    text-align: center;
    position: relative;
    top: -1px;
}

/* =========================================================
   11. SUPPLIER REQUEST MODAL
   ====================================================== */

/* Prompt under no-results message */
.supplier-request-prompt {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.supplier-request-prompt span {
    font-size: 14px;
    color: #666;
}

.btn-supplier-request {
    background-color: #559945;
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-supplier-request:hover {
    background-color: #4a8a3d;
}

/* Modal overlay */
.supplier-request-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.supplier-request-modal.active {
    display: flex;
}

/* Modal content box */
.supplier-request-modal-content {
    background: #fff;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    position: relative;
    padding: 36px 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: supplierModalSlideIn 0.25s ease-out;
}

@keyframes supplierModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Close button */
.supplier-request-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    padding: 4px 10px;
    line-height: 1;
    transition: color 0.2s;
}

.supplier-request-modal-close:hover {
    color: #333;
}

/* Modal title */
.supplier-request-modal-content h2 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
    text-align: center;
}

/* Instructions text */
.supplier-request-instructions {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
    line-height: 1.5;
    text-align: center;
}

/* Form field */
.supplier-request-field {
    margin-bottom: 24px;
}

.supplier-request-field label {
    display: block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.supplier-request-field label .required {
    color: var(--treno-red);
}

.supplier-request-field textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    min-height: 100px;
    resize: none;
    overflow: hidden;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.supplier-request-field textarea:focus {
    outline: none;
    border-color: #559945;
}

.supplier-request-field textarea::placeholder {
    color: #aaa;
}

/* Error message */
.supplier-request-error {
    color: var(--treno-red);
    font-size: 0.9rem;
    margin-top: 8px;
    display: none;
}

.supplier-request-error.visible {
    display: block;
}

/* Action buttons */
.supplier-request-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

.btn-supplier-cancel {
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    padding: 12px 28px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-supplier-cancel:hover {
    background: #eee;
}

.btn-supplier-submit {
    background-color: #559945;
    color: #fff;
    border: none;
    padding: 12px 28px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-supplier-submit:hover {
    background-color: #4a8a3d;
}

.btn-supplier-submit:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Success state */
.supplier-request-success {
    text-align: center;
    padding: 30px 0;
}

.supplier-request-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #559945;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.supplier-request-success-icon i {
    font-size: 36px;
    color: #fff;
}

.supplier-request-success h3 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 24px 0;
}

.btn-supplier-done {
    background-color: #559945;
    color: #fff;
    border: none;
    padding: 14px 40px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-supplier-done:hover {
    background-color: #4a8a3d;
}