/* templates/css/app.pcss
   Single build entry. Compiles tokens, @apply customisations,
   and Tailwind into web/css/app.css.

   Loaded LAST in _layout.twig so Tailwind utilities and @apply'd
   selectors override the hand-edited legacy CSS (style.css,
   slider.css, etc.) during the migration to utilities-first. */

/* ============================================================
   Design tokens — utilities-first system.

   Two tiers:
     1. Primitives — raw values, named by what they are
     2. Semantic   — what they mean; the layer templates use via
                     Tailwind utilities (bg-brand, text-ink, etc.)

   Legacy tokens (--main-colour, --fs-300, --secondary-colour,
   --buuton-dark-text, ...) still live in styleguide.css during
   migration; templates referencing them keep working. New work
   should reach for the semantic names below.
   ============================================================ */

:root {
  /* ── Color primitives ─────────────────────────────────────── */
  --color-green-900: #002205;
  --color-green-500: #a6ce39;
  --color-grey-500:  #7e8083;
  --color-grey-300:  #dddddd;
  --color-grey-100:  #f8f8f8;
  --color-white:     #ffffff;

  /* ── Color — semantic ─────────────────────────────────────── */
  --color-brand:        var(--color-green-900);
  --color-accent:       var(--color-green-500);
  --color-on-brand:     var(--color-white);
  --color-ink:          var(--color-green-900);
  --color-muted:        var(--color-grey-500);
  --color-surface:      var(--color-white);
  --color-surface-alt:  var(--color-grey-100);
  --color-hairline:     var(--color-grey-300);
  --color-link:         var(--color-accent);

  /* ── Font-size primitives ─────────────────────────────────── */
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-20: 1.25rem;
  --font-size-25: 1.5625rem;
  --font-size-30: 1.875rem;
  --font-size-40: 2.5rem;

  /* ── Font-size — semantic ─────────────────────────────────── */
  --fs-small:   var(--font-size-14);
  --fs-body:    var(--font-size-16);
  --fs-lead:    var(--font-size-20);
  --fs-h3:      var(--font-size-25);
  --fs-h2:      clamp(1.5rem, 5vw, var(--font-size-30));
  --fs-display: var(--font-size-40);

  /* ── Line-height primitives (legacy `--fh-*`) ─────────────── */
  /* Migrated from styleguide.css in C2 round 2. Named by the
     approximate pixel size of the line-height they encode; no
     canonical semantic equivalents have been defined yet, so these
     stay as primitives and templates continue to reference them
     directly. */
  --fh-16: 1.006rem;
  --fh-18: 1.15rem;
  --fh-20: clamp(1rem, 5vw, 1.25rem);
  --fh-22: 1.375rem;
  --fh-25: 1.563rem;
  --fh-27: 1.6875rem;
  --fh-28: 1.7968rem;
  --fh-30: 1.875rem;
  --fh-36: 2.25rem;
  --fh-46: 2.875rem;

  /* ── Additional font-size primitives (legacy) ─────────────── */
  /* `--fs-200` is identical in value to `--fs-h3` and could be
     replaced; left in place to avoid churn — 2 refs.
     `--fs-25` is a fluid clamp version of the h3 size — unique
     enough to keep as a primitive. */
  --fs-200: var(--font-size-25);
  --fs-25:  clamp(1.3rem, 5vw, 1.563rem);

  /* ── Layout primitives ────────────────────────────────────── */
  /* Migrated from styleguide.css in C2 round 2 so the canonical
     home is tokens.pcss. The `@media` responsive overrides for
     `--content-max-width` and `--large-content-max-width` remain
     in styleguide.css until that file is fully retired. */
  --content-max-width:       1200px;
  --large-content-max-width: 1760px;
  --grid-max-width:          17600px;
  --width-padding-inline:    2rem;
  --nav-height:              4.688rem;
  --bs-card-border-radius:   0;

  /* ── Gradients ────────────────────────────────────────────── */
  --gradient-brand: linear-gradient(
    91.54deg,
    #003408 -0.77%,
    #002205 28.62%,
    #002205 65.36%,
    #003e0a 100%
  );
}

/* ============================================================
   Responsive overrides for layout primitives.
   Migrated from styleguide.css in C3. The `*` selector is kept
   verbatim from legacy — narrows the var inheritance scope across
   every descendant which is the intended cascade.
   ============================================================ */

@media (min-width: 1920px) {
  * {
    --content-max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  * {
    --content-max-width: calc(100% - 40px);
    --large-content-max-width: calc(100% - 20px);
  }
}

@media (max-width: 1760px) {
  * {
    --large-content-max-width: 1200px;
  }
}

@media (min-width: 1920px) {
  .container {
    --content-max-width: 1760px;
    max-width: var(--content-max-width);
  }
}

/* templates/css/style/_base.pcss
   Base element typography + global resets migrated from styleguide.css
   in C3. These are GLOBAL — they affect every element of the named
   tag site-wide. Be cautious adding to this file.

   The legacy values use literal pixel sizes (16px / 22px / 20px / 30px
   / etc.) rather than the new semantic font-size primitives. Kept
   verbatim because changing them shifts every paragraph on the site;
   a future "type-scale unify" pass can re-tokenize them. */

/* ---------- Element resets ---------- */

ol,
ul,
p {
    padding-left: 0;
    margin-bottom: 0;
}

a {
    color: inherit;
}

select,
option {
    color: black;
}

/* ---------- Base typography ---------- */

h3 {
    font-family: Helvetica;
    font-size: 25px;
    font-weight: 700;
    line-height: 35px;
    text-align: left;
}

h2,
.heading {
    font-family: Helvetica;
    font-size: clamp(1.125rem, 5vw, 1.875rem);
    font-weight: 700;
    line-height: 36px;
    text-align: left;
}

.subheading,
.subheading p {
    font-family: Helvetica;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
}

p {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
}

span {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
}

/* utilities.pcss */

@media (max-width: 1200px) {
    * {
        --content-max-width: calc(100% - 20px);
    }
    .container-xl.container-xl {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media (max-width: 768px) {
    .swiper-team-card.swiper-team-card .card .left-content {
        width: 100%;
        max-width: 100%;
    }
    .review-grid-slider {
        padding-left: 0;
        border-bottom: 1px solid #ddd;
        margin-bottom: 0;
    }
    .product-quote-details {
        grid-template-columns: 0.5fr 1fr;
    }
    /* .contact-card-container padding override moved to
       style/components/_contact_card.pcss with the rest of the cluster */
        /*  .product-card {
            width: 50dvw;
        } */
        #product-grid-container .product-card {
    width: 100%;
  }
        #product-grid-container .product-grid {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0;
            row-gap: 10px;
            padding: 0;
  }
            #product-grid-container .product-grid-container .swiper-slide img {
                -o-object-fit: contain;
                   object-fit: contain;
                height: 100%;
            }
        #product-grid-container .swiper-product-image {
            height: 200px;
        }
        #product-grid-container .products-container-result {
            height: -moz-fit-content;
            height: fit-content;
        }
        #product-grid-container .product-card-content .button {
            gap: 0px;
        }
        #product-grid-container .product-card-content .btn-details {
            white-space: nowrap;
            padding: 5px;
        }
}

@media (min-width: 768px) {

  .swiper-team-card .card {
    min-width: 487px;
  }
}

@media (min-width: 640px) {
    .container-xl.container-xl {
        max-width: var(--content-max-width);
    }
}

.revit-asset__section .swiper-assets-card .card {
    height: 100%;
}

@media screen and (min-width: 520px) {
    .revit-asset__section .swiper-assets-card .card {
        height: 230px;
    }
}

.assets-card-details-container .detail .context {
    margin-top: 0;
}

.assets-card-details-container .description p {
    margin-top: 15px;
}

/* .resource-card-right max-width override, .resource-card-image-embedded
   sizing, and .resource-card-left sizing all merged into the canonical
   base rules in style/components/_resource_card.pcss */

/* Removed `.product-card-image { border: 0; }` — was overriding dead
   border rules in style.css that have since been dropped (see
   style/components/_product_card.pcss). */

@media screen and (max-width: 1921px) {
    .swiper.swiper {
        max-width: 100%;
    }
}

.content-context li {
    list-style-position: outside;
}

.content-block__home .content-split {
  padding-bottom: 0px;
}

form, input {
  border-radius: 0px;
}

/* F2: .map-filter-wrapper { align-items: normal } removed —
   the combined rule below sets align-items: center at equal
   specificity, source-order tiebreaker means the standalone rule
   above was dead. */

.map-filter-wrapper,
.range-filter-wrapper {
  padding-top: 40px;
  padding-bottom: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    flex-direction: column;
}

.map-filter-container {
    display: inline-flex;
    width: 100%;
}

@media screen and (max-width: 1220px) {
    .map-search-button {
        width: -moz-fit-content;
        width: fit-content;
    }
    .map-filter-wrapper,
    .range-filter-wrapper {
        width: auto;
        max-width: var(--content-max-width);
        margin: auto;
    }
}

.map-filter-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-max-width);
}

#contact-container .fui-checkbox-label {
        font-size: 14px;
    }

/* Switch Order Form */

.form-4061 {
  margin-top: 0px;
}

.form-4061 .fui-checkbox-label {
        font-size: 14px;
    }

.form-4061 .fui-heading {
        //styleName: H3;
        font-family: Helvetica;
        font-size: 25px;
        font-weight: 700;
        line-height: 35px;
        text-align: center;
        color: #002205;
    }

.form-4061 .fui-group {
  border-width: 0px;
  padding: 0px;
}

.form-4061 button {
        background-color: #a6ce39;
        border: 0;
        border-radius: 0;
        color: #000;
        padding: 10px 20px;
        font-family: Helvetica;
        font-size: 14px;
        font-weight: 700;
        line-height: 16.1px;
        letter-spacing: 0.05em;
        text-align: left;
        text-transform: uppercase;
    }

.form-4061 button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(166 206 57 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.wholesaler-logo-grid.wholesaler-logo-grid {
    max-width: var(--content-max-width);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.wholesaler-logo-grid.wholesaler-logo-grid .grid-card {
        width: 100%;
        max-width: 200px;
    }

@media screen and (max-width: 480px) {
    .wholesaler-logo-grid.wholesaler-logo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

/* Override Menu Logo */

.megamenu__link.megamenu__link .navLogo {
    width: auto;
}

.swiper-assets-card .card div:last-child {
        margin-top: 5px;
        margin-bottom: 10px;
    }

/* Resource Slider Card */

@media screen and (max-width: 768px) {
    .news-wrapper.news-wrapper .overlay {
        height: 100%;
    }
}

/* Mobile Wholesaler & Featured Card */

@media screen and (max-width: 539px) {
    .swiper-featured-card.swiper-featured-card .card.card {
        height: 497px;
    }
    .swiper-wholesalers-logo.swiper-wholesalers-logo {
        gap: 16px;
    }
        .swiper-wholesalers-logo.swiper-wholesalers-logo .wholesalerIcon-thumb {
            aspect-ratio: auto;
        }
    .product-grid-container.product-grid-container {
        --content-max-width: 100%;
    }
        .product-grid-container.product-grid-container .swiper-slide img {
            height: 100%;
        }
}

/* Mobile Menu */

.mobile-nav-submenu-content.mobile-nav-submenu-content .submenu-container {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

.content-image.content-image img {
    aspect-ratio: auto;
}

.news-wrapper.news-wrapper .overlay img {
    -o-object-fit: contain;
       object-fit: contain;
    aspect-ratio: auto;
    height: clamp(100%, 5vw, 267px);
}

/* LIST */

.content-context ul li {
    list-style: disc;
}

.content-context ol li {
    list-style: decimal;
}

#news-search-result .news-wrapper .overlay {
        height: 100%;
    }

#news-search-result .slide-content {
        gap: 30px;
        height: 100%;
    }

.find-a-wholesaler .rep-content-icon img {
        -o-object-fit: contain;
           object-fit: contain;
    }

/* .casestudies .resource-card-details .context override moved to
   style/components/_resource_card.pcss */

@media (min-width: 1921px) {
    .find-a-representative .swiper-team-card {
        --content-max-width: 1760px;
    }
}

/* .trader-2024-calendar .download-btn-container override moved to
   style/components/_resource_card.pcss */

.grey-policy-padding ul {
        margin-left: 20px;
    }

.grey-policy-padding ul li {
            text-indent: 0;
            padding-left: 0;
        }

.image-slider.image-slider img {
    aspect-ratio: auto;
}

/* .revit-resources resource-card overrides at 480px+ moved to
   style/components/_resource_card.pcss */

.footer-container.footer-container .heading a {
        white-space: nowrap;
    }

/* ---------- Generic utility classes (migrated from slider.css) ---------- */

.hidden {
    display: none;
}

.gap-8 {
    gap: 8px;
}

.no-bottom-p p {
    margin-bottom: 0 !important;
}

.no-bottom {
    margin-bottom: 0 !important;
}

/* ---------- Utility classes migrated from styleguide.css (C3) ---------- */

.link-primary-text,
.btn-primary,
.link-primary {
    font-family: Helvetica;
    font-size: 14px;
    font-weight: 700;
    line-height: 16.1px;
    letter-spacing: 0.05em;
    text-align: left;
}

.n-header {
    text-align: center;
}

.text-grey-light {
    color: var(--color-hairline);
}

.small-bold-text {
    font-weight: 700;
    font-size: var(--fs-small);
    line-height: var(--fh-16);
    letter-spacing: 0.05em;
}

.home-btn {
    border: 1px solid var(--color-brand);
}

.full-width {
    width: 100%;
}

.col {
    flex-direction: column !important;
}

.center-div {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    padding-top: 80px;
}

.image-contain {
    -o-object-fit: contain !important;
       object-fit: contain !important;
}

.image-cover {
    -o-object-fit: cover;
       object-fit: cover;
}

.bold {
    font-weight: 700;
}

.text-sm {
    font-size: 14px;
}

.card {
    border-radius: 0;
}

@media (max-width: 768px) {
    .map-filter-container {
        flex-wrap: wrap;
    }
}

.search-resource-slider .swiper-slide.card, .product-resource-slider .swiper-slide.card {
  min-width: 475px;
  max-width: 475px;
}

@media screen and (max-width: 520px) {
  .search-resource-slider .swiper-slide.card, 
  .product-resource-slider .swiper-slide.card {
    min-width: 270px;
    max-width: 100%;
  }
}

@media (min-width: 1921px) {

  #footer-app .swiper {
    margin-left: auto;
    margin-right: auto;
    max-width: 1920px;
  }
}

@media screen and (max-width: 780px) {
  .swiper-assets-card .left-content {
    width: 100%;
  }
  .swiper-assets-card .left-content img,
  .swiper-team-card .left-content img {
    width: auto;
    aspect-ratio: unset;
  }

  .wholesalers-wrapper,
  .testimonial-wrapper,
  .team-wrapper,
  .slider-container,
  .assets-wrapper {
    padding-inline: 0px;
  }
}

@media (min-width: 1921px) {

  .swiper {
    max-width: 1760px;
  }
}

#product-range-slider {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1536px) {

  #product-range-slider {
    padding-left: 80px;
    padding-right: 80px;
  }
}

@media (min-width: 1921px) {

  #product-range-slider {
    max-width: 1760px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

.custom-slider-pagination > .swiper-pagination-bullet {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.custom-slider-pagination > .swiper-pagination-bullet-active {
  --tw-bg-opacity: 1;
  background-color: rgb(0 34 5 / var(--tw-bg-opacity));
}

@media (max-width: 768px){
      .cross-listing-wrapper .products-container {
    max-width: 100%;
  }
  .swiper-product-image {
    height: 250px;
  }
}

/* ============================================================== *
   Testimonial card (.tcard) — moved here from inline <style> blocks
   in _components/_slider/_home_testimonials.twig and
   _components/_articles/articleMatrix.twig. Single source of truth.
   Uses canonical tokens (--main-colour, --secondary-colour, --text-white)
   instead of the previous --Green/--Dark/--White fallbacks (which
   weren't defined as variables — only relied on the hex fallback).
 * ============================================================== */

.testimonial-card .swiper-wrapper { align-items: stretch; }

.testimonial-card .swiper-slide {
    height: auto;
    width: 539px !important;
    flex-shrink: 0;
}

.tcard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 70px 60px 60px 60px;
    gap: 60px;
    border-bottom: 5px solid var(--color-accent);
    background: var(--color-brand);
    box-sizing: border-box;
    height: 100%;
    min-height: 100px;
    align-items: flex-start;
    flex: 1 0 0;
}

.tcard-body {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.tcard-stars {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.tcard-stars .star { flex: 0 0 auto; }

.star-svg { flex: 0 0 auto; display: block; }

.star-svg.off { opacity: 0.3; }

.tcard-text {
    position: relative;
    overflow: hidden;
    color: var(--color-on-brand);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 0.4px;
    margin: 0;
    padding-bottom: 0;
}

.tcard-text.is-clamped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.2em;
    pointer-events: none;
}

.tcard-more {
    display: inline;
    background: none;
    color: var(--color-accent);
    font-size: inherit;
    font-family: Helvetica, Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: inherit;
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}

.tcard-text.is-clamped .tcard-more { display: inline; }

.tcard-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.tcard-author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.tcard-author .name {
    color: var(--color-accent);
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 27px;
    letter-spacing: 0.4px;
}

.tcard-author .location {
    color: var(--color-on-brand);
    opacity: 0.8;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.3px;
}

@media (max-width: 640px) {
    .tcard {
        width: min(92vw, 520px);
        padding: 36px 28px 28px 28px;
        gap: 32px;
    }
    .tcard-text,
    .tcard-more {
        font-size: 18px;
        line-height: 24px;
    }
    .tcard-author .name {
        font-size: 18px;
        line-height: 24px;
    }
    .tcard-author .location {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (min-width: 768px) {

  #map-filter .container {
    max-width: 100%;
  }
}

@media (min-width: 1921px) {

  #map-filter .container {
    max-width: 1920px;
  }
}

/* Max-width: 1760px */

.container-xxl {
    --content-max-width: calc(1760px);
    max-width: var(--content-max-width);
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 768px) {

  .container-xxl {
    padding-left: 31.5px;
    padding-right: 31.5px;
  }
}

/* ============================================================
   Base container rules migrated from styleguide.css in C3.
   Bootstrap-style container classes; only .container-xl gets the
   max-w-[1760px] Tailwind utility, the rest are auto-centered.
   ============================================================ */

.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    margin: 0 auto;
}

.container-xl {
  max-width: 1760px;
}

@media (min-width: 1760px) {
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        --bs-gutter-x: 0;
    }
    .catalogue-container {
        --bs-gutter-x: 200px;
    }
    .product-filter-container {
        --bs-gutter-x: 40px;
    }
    .project-team-slider .slider-button-container {
        padding-inline: 190px;
    }
}

@media (min-width: 1921px) {
    .container-lg,
    .container-sm,
    .container-xl,
    .container-xxl,
    .container-md {
        max-width: var(--content-max-width);
    }
}

/* Expanded Filter Styles - Matching old filter styling */

/* Product Filter Section */

#product-filter {
    background-color: #F8F8F8;
}

/* Product Search Result Section */

#product-search-result {
    background-color: #FFF;
}

/* Product Filter Container */

.product-filter-container.filter-border {
    border-top: 1px solid var(--color-hairline);
    padding-top: 15px;
    margin-top: 15px;
}

/* Product Filter Content */

.product-filter-content {
    margin-bottom: 15px;
    display: block;
    text-align: center;
}

/* Expanded Filter Container - Horizontal Layout */

.expanded-filter-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.expanded-filter-container.horizontal-layout {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
}

/* Search Section */

.filter-search-section {
    margin-bottom: 15px;
}

.expanded-search-form {
    display: flex;
    align-items: center;
    gap: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    flex-direction: column;
}

.expanded-search-form.horizontal-form {
    flex-direction: row;
    gap: 15px;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 10px;
    color: var(--color-muted);
    pointer-events: none;
    z-index: 1;
}

.expanded-search-input {
    flex: 1;
    width: 100%;
    padding: 8px 8px 8px 38px;
    height: 40px;
    border: 1px solid #ccc;
    outline: none;
    font-size: 14px;
    color: #333333;
    background: white;
}

.expanded-search-input::-moz-placeholder {
    color: #999999;
}

.expanded-search-input::placeholder {
    color: #999999;
}

.expanded-search-btn {
    width: 100%;
    padding: 12px 20px;
    height: 100%;
    background-color: var(--color-accent);
    color: var(--color-brand);
    font-size: 0.875em;
    line-height: 1rem;
    cursor: pointer;
    letter-spacing: 0.05rem;
    font-weight: 700;
    border: none;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

.expanded-search-btn.flex-grow {
    flex: 1;
    margin-top: 0;
}

.expanded-search-btn:hover {
    background-color: #95BA2F;
}

/* Clear All Filters Button */

.clear-all-filters-btn {
    width: 100%;
    padding: 12px 20px;
    height: 100%;
    background-color: transparent;
    color: var(--color-brand);
    font-size: 0.875em;
    line-height: 1rem;
    cursor: pointer;
    letter-spacing: 0.05rem;
    font-weight: 700;
    border: 1.5px solid var(--Dark, var(--color-brand));
    margin-bottom: 15px;
    transition: all 0.2s ease;
    text-align: center;
}

.clear-all-filters-btn.horizontal-btn {
    width: auto;
    min-width: 180px;
    height: 40px;
    background-color: transparent;
    border: 1.5px solid var(--Dark, var(--color-brand));
    border-radius: 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    white-space: nowrap;
    margin-bottom: 0;
}

.clear-all-filters-btn.horizontal-btn:hover {
    background-color: #f5f5f5;
}

.clear-all-filters-btn:hover {
    background-color: #f5f5f5;
}

/* Filter Section */

.filter-section {
    background-color: #FFFFFF;
    border: 1px solid #ccc;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
}

.filter-section.horizontal-filter {
    flex: 1 1 auto;
    min-width: 180px;
    max-width: 280px;
    position: relative;
    overflow: visible;
}

.filter-section.horizontal-filter.clear-btn-height {
    height: 40px;
    border: none;
    background: transparent;
    overflow: visible;
}

.filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
    background: #f9f9f9;
    transition: background-color 0.2s ease;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    height: 40px;
}

.filter-section-header.horizontal-header {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    background-color: #f8f8f8;
    cursor: pointer;
}

.filter-section-header:hover {
    background-color: #f0f0f0;
}

.filter-section-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    letter-spacing: 0;
}

.filter-section-header .selected-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background-color: var(--color-accent);
    border-radius: 50%;
    min-width: 20px;
    min-height: 20px;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    line-height: 1;
}

.filter-arrow {
    transition: transform 0.3s ease;
    color: var(--color-muted);
    flex-shrink: 0;
}

/* Filter Section Content */

.filter-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: #FFFFFF;
}

.filter-section-content.horizontal-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid var(--color-hairline);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.filter-section-content.expanded {
    max-height: 500px;
    padding: 15px;
    overflow-y: auto;
}

.filter-section-content form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Checkbox Label */

.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    flex-direction: row-reverse;
    cursor: pointer;
    padding: 0 0 10px 0;
    position: relative;
    transition: background-color 0.2s ease;
    border-radius: 0;
}

.filter-checkbox-label:hover {
    background-color: transparent;
}

/* Hide default checkbox - display as custom */

.filter-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    color: white;
    border: 1px solid var(--color-hairline);
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

/* Custom Checkbox - not used since we style the input directly */

.checkbox-custom {
    display: none;
}

/* Checkbox hover state */

.filter-checkbox-label:hover .filter-checkbox {
    border-color: #bbb;
}

/* Checked state */

.filter-checkbox:checked {
    border: 0px;
}

.filter-checkbox:checked::before {
    content: "✓";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-accent);
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
}

/* Radio button styling */

input[type="radio"].filter-checkbox {
    border-radius: 50%;
}

input[type="radio"].filter-checkbox:checked::before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-accent);
    border: none;
}

/* Checkbox Label Text */

.checkbox-label-text {
    font-size: 14px;
    color: #333333;
    line-height: 1.4;
    transition: color 0.2s ease;
    font-weight: 400;
}

.filter-checkbox:checked ~ .checkbox-label-text {
    color: #333333;
    font-weight: 400;
}

/* Apply Filters Button */

.apply-filters-btn {
    width: 100%;
    padding: 12px 20px;
    height: 100%;
    background-color: var(--color-accent);
    color: var(--color-brand);
    font-size: 0.875em;
    line-height: 1rem;
    cursor: pointer;
    letter-spacing: 0.05rem;
    font-weight: 700;
    border: none;
    margin-top: 15px;
    transition: background-color 0.2s ease;
    text-align: center;
}

.apply-filters-btn:hover {
    background-color: #95BA2F;
}

.apply-filters-btn:active {
    transform: translateY(0);
}

/* Scrollbar Styling for Filter Content */

.filter-section-content::-webkit-scrollbar {
    width: 6px;
}

.filter-section-content::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 3px;
}

.filter-section-content::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 3px;
}

.filter-section-content::-webkit-scrollbar-thumb:hover {
    background: #A6CE39;
}

/* Responsive adjustments */

@media (max-width: 768px) {
    .expanded-filter-container {
        padding: 16px;
        gap: 12px;
    }

    /* Force vertical layout on mobile */
    .expanded-filter-container.horizontal-layout {
        flex-direction: column;
        gap: 0;
    }

    /* Stack search form vertically on mobile */
    .expanded-search-form.horizontal-form {
        flex-direction: column;
        gap: 0;
    }

    .expanded-search-btn.flex-grow {
        margin-top: 15px;
        flex: none;
    }

    /* Full width filters on mobile */
    .filter-section.horizontal-filter {
        max-width: 100%;
        width: 100%;
        margin-bottom: 15px;
    }

    /* Mobile dropdown positioning */
    .filter-section-content.horizontal-dropdown {
        position: relative;
        top: 0;
        border-top: 1px solid var(--color-hairline);
        border-radius: 0;
        box-shadow: none;
    }

    /* Clear button full width on mobile */
    .clear-all-filters-btn.horizontal-btn {
        width: 100%;
        margin-bottom: 15px;
    }

    .filter-section-header h3 {
        font-size: 13px;
    }

    .checkbox-label-text {
        font-size: 12px;
    }

    .apply-filters-btn,
    .clear-all-filters-btn {
        font-size: 13px;
        padding: 12px 14px;
    }

    /* Reduce filter container padding on mobile */
    .product-filter-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Search section adjustments */
    .filter-search-section {
        margin-bottom: 20px;
    }
}

/* Tablet adjustments */

@media (min-width: 769px) and (max-width: 1024px) {
    .filter-section.horizontal-filter {
        min-width: 150px;
        max-width: 220px;
    }

    .expanded-filter-container.horizontal-layout {
        gap: 15px;
    }

    .filter-section-header h3 {
        font-size: 13px;
    }

    .checkbox-label-text {
        font-size: 13px;
    }
}

/* templates/css/style/buttons.pcss
   Canonical button primitive. New work uses .btn plus a modifier.

   Five patterns (matches the design language captured on /styleguide):
     .btn--primary  lime bg, dark text  — site default CTA
     .btn--dark     dark bg, light text — used on light surfaces / product cards
     .btn--outline  transparent + dark border
     .btn--icon     38×40 square, lime bg
     .btn--lg       larger size modifier (50px tall, 16px label)

   Legacy classes (.signup-button, .download-btn, .btn-details, ...)
   are not aliased here. They keep their current bodies in style.css
   while the migration checklist on /styleguide tracks the per-class
   move to the primitive above. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
    gap: 0.5rem;
    padding: 10px 20px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: var(--fs-small);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.btn--primary {
    background: var(--color-accent);
    color: var(--color-brand);
}

.btn--primary:hover { opacity: 0.85; }

.btn--dark {
    background: var(--color-brand);
    color: var(--color-on-brand);
}

.btn--dark:hover {
    background: var(--color-accent);
    color: var(--color-brand);
}

.btn--outline {
    background: transparent;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
}

.btn--icon {
    width: 38px;
    height: 40px;
    padding: 10px;
    background: var(--color-accent);
    color: var(--color-brand);
}

.btn--lg {
    padding: 14px 24px;
    font-size: var(--fs-body);
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Styles extracted from _home_testimonials.twig inline attributes.
   The Swiper init still lives in the twig — splitting that out
   needs a sliders.js audit and is deferred. */

.testimonial-prev,
.testimonial-next {
    background-color: #fff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    cursor: pointer;
}

/* Styles extracted from _banner_logo.twig <style> block.
   Per-render colour comes through as the --bg-tint custom property
   set on the .hero-logo element (already includes the 80-alpha
   suffix the original used). */

.hero-logo {
    position: relative;
}

.hero-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bg-tint);
    opacity: 0.5;
}

.hero-logo > .logo > img {
    height: 70px;
}

/* templates/css/style/components/_footer.pcss
   Footer styles consolidated from style.css and styleguide.css.
   Uses the new semantic tokens (--color-brand, --color-on-brand,
   --color-muted, --color-accent). The legacy typo'd class names
   (.footer-container, .social-media-icons) are preserved — those
   renames are a separate cleanup pass. */

.footer-container {
    --padding-top: 80px;
    border-top: 5px solid var(--color-accent);
    padding-top: var(--padding-top);
    padding-bottom: 40px;
    background-color: var(--color-brand);
}

/* Bootstrap-grid escape: the .row gutters use Bootstrap CSS
       variables that no longer have values now that Bootstrap is
       gone. Kept for parity; harmless if --bs-gutter-* is unset. */

.footer-container .row {
        --bs-gutter-y: 3rem;
    }

.footer-container .row > * {
        --bs-gutter-x: 3rem;
    }

@media (max-width: 768px) {
    .footer-container {
        --padding-top: 40px;
    }
}

.footer-container .container {
    max-width: var(--large-content-max-width);
}

/* Responsive container behaviour — preserved verbatim from style.css. */

@media (max-width: 1600px) {
    .footer-container { flex-wrap: wrap; }
}

@media screen and (max-width: 1440px) {
    .footer-container { justify-items: flex-start; }
}

@media screen and (max-width: 1100px) {
    .footer-container { justify-content: center; }
}

@media screen and (max-width: 1006px) {
    .footer-container {
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 768px) {
    .footer-container { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 700px) {
    .footer-container { grid-template-columns: 1fr; }
}

@media screen and (max-width: 620px) {
    .footer-container { justify-content: flex-start; }
}

.footer-content {
    margin-top: 15px;
}

.footer-copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
    padding-top: 80px;
    background-color: var(--color-brand);
    gap: 80px;
}

.footer-copyright a {
    color: var(--color-grey-300);
}

.signup-form {
    display: flex;
    overflow: hidden;
    height: 40px;
    width: 100%;
}

/* Submit button inside the footer newsletter form. Layout-only —
   colour / font / padding all come from `.btn .btn--primary`. */

.signup-form .btn {
    flex: 0 0 10%;
    width: 100%;
    align-self: center;
    font-size: 0.785rem;
    display: flex;
}

@media screen and (max-width: 1440px) {
    .signup-form { width: 100%; }
}

@media screen and (max-width: 1280px) {
    .signup-form { width: 80dvw; }
}

@media screen and (max-width: 708px) {
    .signup-form { min-width: 100%; }
}

.email-input {
    width: 100%;
    height: 100%;
    border: none;
    padding: 8px 15px;
    font-size: var(--fs-small);
    color: var(--color-muted);
    margin-right: 10px;
    flex: 1 0 60%;
}

.email-input:focus { outline: none; }

.email-input::-moz-placeholder { color: var(--color-muted); }

.email-input::placeholder { color: var(--color-muted); }

.social-media-icons {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.content-container-footer .heading {
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1.438rem;
    color: var(--color-on-brand);
}

.content-container-footer li a {
    color: var(--color-on-brand);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.294em;
    letter-spacing: 0.05em;
    gap: 35px;
    display: flex;
}

.content-container-footer li a:hover {
    color: var(--color-accent);
}

/* templates/css/style/components/_product_card.pcss
   Product-card styles consolidated from style.css. Used by the
   three card-rendering twigs (_sprig_complex_filter.twig,
   _category_collection_filter.twig, _product_cross_listing.twig)
   plus their grid wrapper.

   .btn-details / .btn-wishlist NOT migrated to .btn .btn--dark /
   .btn--icon yet — both have visual drift that needs a designer's
   call (see the styleguide Buttons checklist). Their bodies are
   preserved verbatim (scoped via .product-card-content). */

/* ---------- Grid wrapper + overlay (NEW badge) ---------- */

.product-grid-wrapper {
    height: unset !important;
    margin-left: 80px !important;
}

@media screen and (max-width: 537px) {
    .product-grid-wrapper {
        margin-left: 0px !important;
    }
}

.product-grid-wrapper .overlay {
    position: relative;
}

.product-grid-wrapper .overlay img {
    display: block;
    width: 100%;
    height: auto;
}

.product-grid-wrapper .overlay .is-new {
    position: absolute;
    background-color: var(--color-brand);
    padding: 15px;
    z-index: 15;
    top: 0;
    right: 0;
}

.product-grid-wrapper .overlay .is-new a {
    color: var(--color-surface-alt);
    font-weight: 700;
    line-height: 18.4px;
    letter-spacing: 3%;
    font-size: 1em;
}

/* ---------- Card ---------- */

.product-card {
    --bs-gutter-x: 0;
    width: 270px;
    height: 100%;
}

.product-card-image {
    max-height: 330px;
    max-width: 269px;
    /* Original style.css set 1px hairline borders on left/top/right
       here, but utilities.pcss had an unconditional `.product-card-image
       { border: 0; }` override that always won the cascade — so the
       borders never rendered. Dropped to keep this file honest. */
}

.product-card-image .image-slider {
    -o-object-fit: fill;
       object-fit: fill;
}

.product-card-content {
    border: 1px solid var(--color-hairline);
    background-color: var(--color-surface);
    padding: 20px;
    position: relative;
    height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-card-content .heading {
    line-height: 25px;
}

.product-card-content .content {
    color: var(--color-brand);
    display: flex;
    flex-direction: column;
}

.product-card-content .content h2 {
    font-weight: 700;
    font-size: var(--fs-lead);
    line-height: var(--fh-22);
    letter-spacing: 0.02rem;
    color: var(--color-brand);
}

.product-card-content .subheading {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 18.4px;
    color: var(--color-muted);
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Typography + 2-line clamp (clamp properties migrated from
   product.css in A7). */

.product-card-content .context {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 22px;
    color: var(--color-brand);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.product-card-content .button {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

/* F3: decoupled from `.product-card-content` parent — both classes
   are only ever rendered inside a product card, so the parent
   scope was overhead without unlocking reuse. .apply-button still
   shares this body; move to its own home in the A5 forms sweep. */

.btn-details,
.apply-button {
    font-weight: 700;
    display: flex;
    align-items: center;
    background-color: var(--color-brand);
    color: var(--color-on-brand);
    height: 40px;
    letter-spacing: 0.05rem;
    line-height: 16.1px;
    width: 100%;
    justify-content: center;
}

.btn-wishlist {
    display: inline-flex;
    padding: 10px;
    background-color: var(--color-accent);
    color: var(--color-on-brand);
    height: 40px;
}

.product-card-content .paws-points {
    padding-bottom: 0;
}

/* ---------- Cross-listing context overrides ---------- */

.cross-listing-wrapper .product-card-content {
        height: 327px;
        max-height: 100%;
        border: 0;
    }

/* `.overlay-container { width: 100% }` removed — was effectively
       dead code in style.css (slider.css's `.swiper-featured-card
       .overlay-container { width: 50% }` always won the cascade since
       slider.css loaded after style.css). When step 5b moved this
       block to _product_card.pcss → app.css the load order flipped,
       the 100% started winning, and the absolute-positioned overlay
       stretched across both grid columns hiding the right-column
       content (broke the homepage "You might also like" section). */

.cross-listing-wrapper .product-cross-card .card {
        height: 330px;
        max-width: 539px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
        border: 1px solid var(--color-hairline);
    }

.cross-listing-wrapper .products-container {
        max-width: 269px;
    }

.cross-listing-wrapper .product-card-content.row {
        max-width: 269px;
        --bs-gutter-x: 0;
    }

.cross-listing-wrapper .product-card-content.row .heading {
            margin-bottom: 0;
        }

.cross-listing-wrapper .product-card-content .button {
        display: flex;
        flex-direction: row;
        gap: 15px;
        position: static;
        width: 100%;
        justify-content: flex-end;
    }

/* templates/css/style/components/_hero.pcss
   Hero banner + text-only hero styles consolidated from style.css.

   Used by _components/_hero/_hero_text.twig (banner-wrapper +
   hero-banner cluster), and by _category/_shop-by-category.twig
   + similar pages (hero-text-container cluster).

   The catalogue-style hero (_hero_banner_page.twig, .catalogue-*
   classes) is a separate concern and not in this sweep — those
   templates render resources/catalogue pages, not page heroes. */

/* ---------- banner-wrapper / hero-banner family ---------- */

.banner-wrapper {
    background-color: var(--color-brand);
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    color: var(--color-on-brand);
    padding-block: 60px;
    /* merged from style.css L4318 — was a second .banner-wrapper
       rule body containing only this property. */
    max-width: 100dvw;
}

/* Self-double for specificity — preserved from old styles.pcss
   bottom. Beats parent layout containers that try to constrain
   .banner-wrapper width. */

.banner-wrapper.banner-wrapper {
  width: 100vw;
  max-width: 100%;
}

.banner-wrapper .hero-banner-container .context {
    padding-top: 0;
}

.hero-banner {
    align-items: center;
    display: flex;
    gap: 40px;
    margin: 0 auto;
    max-width: var(--content-max-width);
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media screen and (max-width: 630px) {
    .hero-banner { height: unset; }
}

.hero-banner-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 0 30%;
}

.hero-banner-container .heading p {
    line-height: 2.5rem;
}

.hero-banner .heading {
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 2.25rem;
    color: var(--color-on-brand);
}

.hero-banner .subheading p {
    color: var(--color-accent);
}

.hero-banner-img img {
    aspect-ratio: 21 / 9;
    width: 100%;
    max-width: 537px;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
}

@media (max-width: 768px) {
    .hero-banner-img img {
        max-width: 100%;
        height: auto;
    }
}

/* ---------- hero-text-container (text-only hero variant) ---------- */

.hero-text-container {
    width: min(var(--content-max-width), 100% - 4rem);
    margin-inline: auto;
    color: var(--color-on-brand);
    text-align: center;
    padding-top: 80px;
    padding-bottom: 80px;
}

.hero-text-container .hero-header {
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: var(--fh-36);
}

.hero-text-container .hero-header h2 {
    text-align: center;
    margin-bottom: 20px;
}

.hero-text-container .hero-header a {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--fh-22);
    text-decoration: none;
}

/* templates/css/style/components/_catalogue.pcss
   Catalogue layout (left image + right text wrapper) used by the
   catalogue hero (_hero_banner_page.twig) and four filter
   templates that share the same .catalogue-* split layout.

   Note: .catalogue-right-wrapper a is a broad descendant selector
   that styles ALL anchors in the wrapper as a filled lime button.
   That coupling is preserved here as-is — decoupling it (so
   anchors only get the styling when explicitly opted in) is a
   separate refactor.

   .expanded-search-btn NOT migrated to .btn .btn--outline. Despite
   the styleguide checklist claim, this class actually renders as a
   filled lime button (inheriting .catalogue-right-wrapper a) plus
   a few modifier properties — not as an outline button. Needs a
   designer call before reconciling. */

.catalogue-container {
    display: flex;
    margin-inline: auto;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
    margin-block: 80px;
}

.catalogue-left img {
    max-width: 300px;
    max-height: 423.15px;
    box-shadow: 4px 6px 8px 0px #00000033;
}

.catalogue-right {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media screen and (min-width: 520px) {
    .catalogue-container {
        margin-block: 80px;
        gap: 77px;
    }
        .catalogue-container .catalogue-right {
            width: 37%;
        }
}

.catalogue-right-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.catalogue-right-wrapper p {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--fh-22);
    color: var(--color-brand);
}

.catalogue-right-wrapper a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    background-color: var(--color-accent);
    max-width: 153px;
    max-height: 40px;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--fh-22);
    color: var(--color-brand);
    text-align: center;
}

/* F3: extracted from `.catalogue-right-wrapper a.expanded-search-btn`
   parent-coupled rule. The catalogue context renders the search
   button inline (fit-content) with no margin-top — promoted to a
   composable `.expanded-search-btn--inline` modifier so the styling
   isn't bound to a specific page wrapper. Applied to the
   `<a class="expanded-search-btn">` link inside
   `.catalogue-right-wrapper` in _hero_banner_page.twig.

   Compound `.expanded-search-btn.expanded-search-btn--inline`
   selector (specificity 0,2,0) is intentional: when used inside
   `.catalogue-right-wrapper`, the generic `.catalogue-right-wrapper a`
   rule above (0,1,1) would otherwise beat the modifier (0,1,0) on
   its overrides (font-weight, max-width). Compound class boosts it
   over the parent selector. */

.expanded-search-btn.expanded-search-btn--inline {
    width: -moz-fit-content;
    width: fit-content;
    max-width: none;
    max-height: none;
    margin-top: 0;
    font-weight: 700;
    text-decoration: none;
}

/* templates/css/style/components/_content_split.pcss
   Content-split layout used by _styleOne.twig, _split_context.twig,
   home.twig, and articleMatrix.twig. Pattern: a section wraps a
   container with a 2-column flex grid; each column is a
   .content-split (an asset/iframe on one side, text + CTA on the
   other).

   Out of scope (still in style.css for future sweeps):
   - #newsletter-popup .content-split { ... } — newsletter context
*/

.content-container-1 {
    display: flex;
    max-width: var(--content-max-width);
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.content-container-1 .grid {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.content-container-1 .grid.home {
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 960px) {
    .content-container-1 .grid {
        flex-wrap: wrap;
        gap: 10px;
    }
    .content-container-1 .grid.home {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 815px) {
    .content-container-1 {
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- Wrapper section (.content-split-wrap) ---------- */

.content-split-wrap {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 30px 0;
    border-bottom: 1px solid var(--color-hairline);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {

  .content-split-wrap {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}

/* Was templates/css/tailwindcss.pcss → app.pcss bottom. Belongs
   with the rest of the family, moved here. */

.content-split-wrap .content-container-1 .content-split {
  margin-top: 1.25rem;
  flex: 1 1 100%;
}

@media (min-width: 768px) {

  .content-split-wrap .content-container-1 .content-split {
    margin-top: 0px;
    flex: 1 1 calc(50% - 20px);
  }
}

/* ---------- Split column (.content-split) ---------- */

.content-split {
    display: flex;
    flex: 1 1 calc(50% - 20px);
    width: 100%;
    flex-direction: column;
    padding-bottom: 40px;
}

.content-split.text {
    display: flex;
    align-items: center;
    width: 100%;
    flex: 1 1 calc(50% - 20px);
}

.content-split .heading {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: var(--fh-36);
    margin-bottom: 20px;
}

.content-split .heading h2 {
    color: var(--color-brand);
}

.content-split .paragraph {
    margin-bottom: 20px;
}

.content-split .paragraph p {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--fh-22);
}

/* Sizing + typography for any .button inside .content-split. The
   bg/colour is intentionally NOT set here — the buttonColour=1 path
   inherits from .button-link.rev (slider.css), and the
   buttonColour=0 path uses the .btn--primary modifier. Setting
   bg/colour here would have a higher specificity and break the
   modifier-wins rule. */

.content-split .button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--fs-small);
    letter-spacing: 5%;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
    width: 168px;
    height: 40px;
}

.content-split .content {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}

.content-split .content iframe {
    width: 100%;
    height: 100%;
}

/* ---------- Inner wrapper (.content-split-wrapper) ---------- */

.content-split-wrapper {
    margin: 23.5px 0;
}

@media screen and (max-width: 1170px) {
    .content-split-wrapper {
        margin: 23.5px 30px;
    }
}

.content-split-wrapper.child {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media screen and (max-width: 1170px) {
    .content-split-wrapper.child {
        margin-right: 20px;
    }
}

.content-split-wrapper.child .heading {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 0;
}

.content-split-wrapper.child .paragraph {
    margin-bottom: 0;
    padding-bottom: 0;
    text-align: center;
    color: var(--color-muted);
}

.content-split-wrapper.child .link {
    font-weight: 700;
    font-size: var(--fs-body);
    line-height: var(--fh-30);
    margin-bottom: 10px;
    text-align: center;
    text-decoration: underline;
    color: var(--color-link);
}

/* ---------- 2-column grid wrapper (.content-split-contain) ---------- */

.content-split-contain {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

@media (max-width: 768px) {
    .content-split-contain {
        grid-template-columns: 1fr;
    }
}

/* ---------- Trader-logo asset cluster ---------- */

/* Used inside .content-split when the asset slot holds a logo image
   (see _split_context.twig). Centres the logo vertically and removes
   the default top padding when it's left-aligned. */

.content.trader-logo {
    align-items: center;
}

.content.trader-logo-left {
    padding-top: unset;
    justify-content: center;
}

/* ---------- Embedded iframe (.custom-iframe) ---------- */

/* Used by _styleOne.twig (content-split asset slot), articleMatrix.twig
   (article video block), and _hero_banner_page.twig (page hero video).
   Sized for a 16:9 video at the historical 560×315 aspect — width is
   100% of its parent column, height fixed. */

.custom-iframe {
    height: 315px;
    border: 0;
}

/* templates/css/style/components/_article_matrix.pcss
   Article-matrix specific styles. Drives the cases inside
   _components/_articles/articleMatrix.twig — articleFooterBlock,
   articleImages, articleContextGrey, articleLineBreak, buttonMatrix,
   downloadButtons, heroBannerText, testimonials, imagesSlider, and
   productSelector. */

/* ---------- Top-level content wrapper ---------- */

/* The base .content-main rule (style.css) already sets margin-top: 5rem
   for the article context. The non-article fallback (e.g. /customer-
   support/newsletter when no entry is bound) needs to override that
   back to flush. */

.content-main--flush { margin-top: 0; }

/* ---------- contentSplitWithDiscover wrapper ---------- */

/* The matrix-scoped variant of .content-split-wrap (defined in
   _content_split.pcss) — adds the off-white surface tint and the
   100dvw max-width that the article context wants. */

.content-split-wrap--matrix {
    background-color: var(--color-surface-alt);
    max-width: 100dvw;
}

/* ---------- articleImages ---------- */

/* The .content-image-container base rule lives in _content_image.pcss
   and reads --content-image-pad. The twig sets that inline when
   bottomPadding is true. */

.video-embed { width: 100%; }

/* ---------- articleContextGrey ---------- */

.matrix-context-grey {
    padding-bottom: var(--context-grey-pad, 20px);
}

/* ---------- articleLineBreak ---------- */

.container-divider--wide  { max-width: 1400px; }

.container-divider--full  { max-width: 100dvw; }

/* ---------- articleFooterBlock (.content-button) ---------- */

/* Used by articleMatrix.twig's articleFooterBlock case: a row with a
   "Back to news feed" link on the left and a Share button on the right. */

.content-button {
    display: flex;
    margin-top: 40px;
    margin-bottom: 40px;
    justify-content: space-between;
    align-items: center;
}

.content-button .content-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: var(--fs-small);
    line-height: var(--fh-16);
    letter-spacing: 0.05;
    color: var(--color-brand);
    text-decoration: none;
}

.content-button button {
    padding: 10px 20px;
    border: 1px solid var(--color-brand);
    font-size: var(--fs-small);
    line-height: var(--fh-16);
    letter-spacing: 0.05;
}

/* ---------- buttonMatrix wrapper ---------- */

.matrix-button-wrap {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    padding-bottom: var(--button-wrap-pad, 20px);
}

/* ---------- downloadButtons ---------- */

.download-btn-h2 {
    color: var(--color-brand);
    font-family: Helvetica;
    font-size: var(--font-size-30);
    font-weight: 700;
    line-height: 36px;
    text-align: center;
}

.download-btn-row {
    display: flex;
    gap: 15px;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- heroBannerText (matrix wrapper) ---------- */

/* The banner itself is now rendered by the shared _hero_text.twig
   partial (single source of truth — same classes as the standalone
   page hero). This wrapper only owns the extra spacing below the
   banner that the matrix layout needs between blocks. */

.matrix-hero-banner {
    margin-bottom: 80px;
}

/* ---------- testimonials section ---------- */

#testimonials {
    background-color: var(--color-surface);
    max-width: 100dvw;
}

.swiper.testimonial-card { position: relative; }

/* Round nav button used by both .testimonial-prev and .testimonial-next.
   The shared cluster lives on the .swiper-content-card-button row. */

.testimonial-prev,
.testimonial-next {
    background-color: var(--color-surface);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    cursor: pointer;
}

/* ---------- imagesSlider ---------- */

.swiper.image-slider {
    width: 100%;
    max-width: 800px;
    height: 630px;
}

.image-slide img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
}

/* ---------- productSelector ---------- */

.product-training-image {
    margin: 0 auto;
}

/* templates/css/style/components/_content_image.pcss
   Content-image grid used by articleMatrix.twig (article body image
   block) and dtOrderForm.twig (design-tools order form). Two-column
   grid by default; the third image and beyond span full width, and a
   solo image also goes full width. Collapses to single column under
   768px. */

.content-image-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /* Default 60px; articleMatrix.twig's articleImages case sets
       --content-image-pad inline to "10px" when its bottomPadding
       toggle is enabled. */
    padding-bottom: var(--content-image-pad, 60px);
}

.content-image-container .content-image:nth-of-type(n + 3),
.content-image-container .content-image:nth-of-type(1):only-child {
    grid-column: 1 / -1;
}

.content-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 680px;
}

.content-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
    .content-image-container {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

/* templates/css/style/components/_contact_card.pcss
   Contact-card layout used by customer-support/contactus.twig.
   A 2-column flex split: image on the left, heading + subheading +
   address + hours + contact rows on the right. Hairline divider at
   the bottom of the section. */

.contact-card-container {
    width: 100%;
    padding-block: 80px;
    border-bottom: 1px solid var(--color-hairline);
}

.contact-card-wrapper {
    margin: 0 auto;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

.contact-card-img {
    width: 100%;
    max-width: 460px;
    max-height: 456px;
    display: flex;
    align-items: center;
    flex: 1 50%;
}

.contact-card-img img {
    width: 100%;
    height: auto;
}

.contact-card-details-container {
    margin-block: 32px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    flex: 1 0 50%;
}

.contact-card-heading {
    font-family: Helvetica;
    font-size: var(--font-size-30);
    font-weight: 700;
    line-height: 36px;
    text-align: center;
    color: var(--color-brand);
}

.contact-card-subHeading {
    font-family: Helvetica;
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 30px;
    text-align: center;
    color: var(--color-muted);
}

.contact-card-address .address-heading,
.contact-card-hours .hours-heading {
    font-family: Helvetica;
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: var(--color-brand);
}

.contact-card-address .address,
.contact-card-hours .hours {
    font-family: Helvetica;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    color: var(--color-brand);
}

.contact-card-contact-container {
    display: flex;
    flex-direction: column;
}

.contact-card-contact {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
}

.contact-card-contact .contact {
    font-family: Helvetica;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    color: var(--color-brand);
}

.contact-card-contact .strong {
    font-weight: 700;
}

@media (max-width: 768px) {
    .contact-card-container {
        padding-block: 30px;
    }
}

/* templates/css/style/components/_news.pcss
   News-card grid layout. Used by _all_news_filter.twig (the static
   3-column news listing).

   IMPORTANT cascade note: slider.css owns the slider variants of
   .news-wrapper .card (swiper-content-card, swiper-event,
   swiper-featured-card → grid 2-col). The static-listing card rules
   below are scoped to .all-news-wrapper so they don't override the
   slider rules — app.css loads AFTER slider.css, so a bare
   `.news-wrapper .card { display: flex }` rule here would defeat
   `.swiper-featured-card .card { display: grid }` (same specificity,
   later cascade wins) and break the homepage featured-products grid. */

/* ---------- All-news listing wrapper ---------- */

.all-news-wrapper {
    display: grid;
    max-width: var(--grid-max-width);
    gap: 40px;
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: 60px;
}

/* ---------- Responsive grid breakpoints (.news-wrapper) ---------- */

/* Targets .news-wrapper directly because the listing markup is
   <div class="news-wrapper full all-news-wrapper">. The selector
   matches slider .news-wrapper instances too, but those use display:
   flex (Swiper) so grid-template-columns is a no-op. */

@media screen and (max-width: 900px) {
    .news-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 590px) {
    .news-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ---------- Card inside the static news listing ---------- */

.all-news-wrapper .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--color-hairline);
}

.all-news-wrapper .card.full {
    width: 100%;
    max-width: 100%;
}

/* _assets_card must be imported BEFORE _resource_card — see the
   cascade-order note at the top of _assets_card.pcss. The resource-
   card overrides for .product-resources__card .left-content need to
   win against the generic .swiper-assets-card .left-content rule. */

/* templates/css/style/components/_assets_card.pcss
   Asset-card + team-card slider cluster. Used by:
   - _components/_slider/_product_resources.twig (category-level
     resources, uses .product-resource-slider)
   - _components/_slider/_product_resources_product.twig (product-
     detail Resources, uses .product-resources__card)
   - Project-team slider (.swiper-team-card / .project-team-slider)
   - Various asset / category sliders using .swiper-assets-card

   IMPORTANT cascade order: this file MUST be imported BEFORE
   _resource_card.pcss in app.pcss so that the A3 resource-card fix
   (`.product-resources__card .left-content { width:205; padding:20 }`)
   continues to win against the generic
   `.swiper-assets-card .left-content { max-width:205; width:100% }`
   here. Both selectors have the same specificity (0,0,2,0); both
   match in the product-detail Resources slider; later import wins.
   The A3 fix is the one that should win — its 20px padding gives
   the image enough breathing room not to overflow the 250px card. */

/* ---------- Positioning context ---------- */

/* .swiper-assets-card / .swiper-team-card need position:relative as
   the containing block for the absolute-positioned button row
   (.swiper-content-card-button). */

.swiper-assets-card,
.swiper-team-card {
    position: relative;
}

/* Assets-slider-wrapper provides the positioning context when the
   button row is anchored to the wrapper rather than the swiper. */

.assets-slider-wrapper.assets-heading {
    position: relative;
}

/* Override the floating-row vertical centering from
   _swiper_buttons.pcss when the button container is inside the
   assets-slider-wrapper — anchor it to the bottom of the wrapper
   instead, then translate up by half the card height (273/2). */

.assets-slider-wrapper.assets-heading .swiper-content-card-button {
    position: absolute;
    top: auto;
    bottom: 0;
    transform: translateY(calc(-136.5px));
}

/* ---------- Slider section wrappers ---------- */

.assets-heading,
.project-team-slider {
    width: 100%;
}

.assets-slider {
    max-width: 100dvw;
    padding-top: 80px;
}

.project-team-slider {
    max-width: 100dvw;
    padding-top: 80px;
    background-color: var(--color-surface-alt);
}

.assets-slider-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-inline: auto;
    text-align: center;
}

.assets-slider-content .n-header {
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 2.25rem;
    color: var(--color-brand);
}

.assets-sub-content {
    font-weight: 400;
    font-size: var(--fs-lead);
    line-height: var(--fh-30);
    color: var(--color-muted);
}

.assets-wrapper {
    height: unset !important;
}

/* ---------- Swiper container padding ---------- */

.swiper-assets-card,
.swiper-team-card {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* ---------- Team card base (.swiper-team-card .card) ---------- */

/* Note: this overrides the more generic .swiper-assets-card .card /
   .swiper-team-card .card below for .swiper-team-card-only contexts.
   Kept first so the order matches the legacy file. */

.swiper-team-card .card {
    display: grid;
    grid-template-columns: 0.3fr 1fr;
    width: auto;
    border: 1px solid var(--color-hairline);
}

@media screen and (min-width: 520px) {
    .swiper-team-card .card {
        width: 475px;
    }
}

@media screen and (max-width: 539px) {
    .swiper-team-card .card {
        display: grid;
        width: auto;
        grid-template-columns: 0.7fr 1fr;
        border: 1px solid var(--color-hairline);
    }
}

.swiper-team-card .right-content .team-card-details-container {
    display: flex;
    flex-direction: column;
    padding: 55px 20px 35px 24px;
    max-width: 307px;
}

.swiper-team-card .right-content .contact {
    display: flex;
    flex-direction: column;
}

.swiper-team-card .left-content .img {
    width: 241px;
    height: 263px;
}

.team-card-details-container .detail h1 {
    font-weight: 700;
    font-size: 1.25em;
    line-height: var(--fs-25);
    letter-spacing: 0.02rem;
    margin-bottom: 15px;
}

.team-card-details-container .detail p {
    font-weight: 400;
    font-size: 1em;
    line-height: 1.15rem;
    color: var(--color-muted);
}

.team-card-details-container .divider {
    padding-top: 24px;
    padding-bottom: 24px;
    display: flex;
}

.team-card-details-container .contact .email {
    text-decoration: underline;
    color: var(--color-accent);
    line-height: 22px;
}

.team-card-details-container .contact a {
    text-decoration: underline;
    line-height: 22px;
    color: var(--color-brand);
}

/* ---------- Card base (both assets + team) ---------- */

.swiper-assets-card .card,
.swiper-team-card .card {
    height: 273px;
    display: grid;
    grid-template-columns: 0.7fr 1fr;
    width: auto;
    max-width: 475px;
    border: 1px solid var(--color-hairline);
    background-color: var(--color-surface);
}

/* Revit + resource-card variants are slightly shorter and have a
   fixed (not max-) width. */

.revit-asset__section .swiper-assets-card .card,
.product-resources__card .card {
    height: 250px;
    width: 475px;
}

.project-card-wrapper .card {
    max-width: 100%;
}

/* ---------- Right column ---------- */

.swiper-assets-card .right-content .assets-card-details-container,
.swiper-team-card .right-content .assets-card-details-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    height: 100%;
}

.assets-card-details-container .description p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 30px;
}

.assets-card-details-container .detail .context {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 400;
    line-height: 18.4px;
    text-align: left;
    color: var(--color-muted);
    margin-top: 30px;
}

.project-card-wrapper .right-content {
    padding: 55px 24px 35px 20px;
}

.swiper-assets-card .right-content .contact,
.swiper-team-card .right-content .contact {
    display: flex;
    flex-direction: column;
}

/* ---------- Left column images ---------- */

.swiper-assets-card .left-content img,
.swiper-team-card .left-content img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* Override for assets-card specifically — natural width + contain. */

.swiper-assets-card .left-content img {
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.swiper-assets-card .left-content img.downloadImg,
.swiper-team-card .left-content img.downloadImg {
    padding: 20px;
}

/* ---------- Left column ---------- */

/* See cascade note in file header — _resource_card.pcss has a more
   specific override for .product-resources__card .left-content that
   must win. Keep _assets_card.pcss imported BEFORE that file. */

.swiper-assets-card .left-content,
.swiper-team-card .left-content {
    max-width: 205px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Project-team slider context — overrides the assets-card left-content
   to a fixed 210×273 box with object-fit:contain images. */

.project-team-slider .swiper-assets-card .left-content,
    .project-team-slider .swiper-team-card .left-content.left-content {
        width: 210px;
        height: 273px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.project-team-slider .swiper-assets-card .left-content img, .project-team-slider .swiper-team-card .left-content.left-content img {
            -o-object-fit: contain;
               object-fit: contain;
        }

/* ---------- Responsive breakpoints ---------- */

@media screen and (max-width: 520px) {
    .swiper-assets-card .card,
    .swiper-team-card .card {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr;
        border: 1px solid var(--color-hairline);
        min-width: 270px;
    }

    .project-team-slider .swiper-assets-card .left-content,
    .swiper-team-card .left-content {
        max-width: 100%;
    }
    .swiper-assets-card .left-content {
        padding: 5px;
        height: 220px;
        max-width: 100%;
    }
    .swiper-assets-card .right-content {
        height: 220px;
    }
    .swiper-assets-card .left-content img {
        -o-object-fit: contain;
           object-fit: contain;
    }
}

@media (max-width: 768px) {
    .swiper-team-card .card {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr;
        border: 1px solid var(--color-hairline);
        min-width: 270px;
    }
    .swiper-team-card .left-content {
        width: 100%;
    }
}

/* ---------- Details container typography ---------- */

.assets-card-details-container .month {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 400;
    line-height: 18.4px;
    text-align: left;
    color: var(--color-muted);
    margin: 10px 0 0 0;
}

.assets-card-details-container .detail {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.assets-card-details-container .detail h1 {
    font-weight: 700;
    font-size: 1.25em;
    line-height: var(--fs-25);
    letter-spacing: 0.02rem;
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.assets-card-details-container .detail .description p {
    font-weight: 400;
    color: var(--color-brand);
    line-height: var(--fh-22);
}

.assets-card-details-container .detail .content {
    padding-top: 5px;
}

.assets-card-details-container .detail p {
    font-weight: 400;
    font-size: 1em;
    line-height: 1.15rem;
}

/* ---------- Download CTA ---------- */

.assets-card-details-container .download {
    padding: 15px 58.5px;
    background-color: var(--color-accent);
    line-height: 22px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-brand);
}

.download.asset {
    padding: 10px 20px;
    justify-content: center;
}

.download > span {
    width: -moz-max-content;
    width: max-content;
}

/* ---------- Team-slider header content ---------- */

/* Spacing + typography for the team-slider section header above the
   project-team swiper. Inset 80px on each side by default, 0 below
   the 1200px breakpoint. */

.team-slider-content {
    margin: 0 80px;
}

@media screen and (max-width: 1200px) {
    .team-slider-content {
        margin: 0;
    }
}

.team-sub-content {
    font-weight: 400;
    font-size: 1em;
    line-height: 1.375rem;
}

/* templates/css/style/components/_resource_card.pcss
   Resource-card cluster used by /resources/* pages (downloads,
   catalogues, videos, case-studies) via the
   _components/_filter/_sprig_resources_expanded Sprig component, plus
   the standalone _components/_listing/_revitListing.twig.

   Pattern: .resource-grid (2-col grid) wraps .resource-card rows;
   each card is image-left + details-right with optional download/
   video CTA at the bottom of the right column.

   Includes the .download-btn / .download-btns / .video-label /
   .video-embed-full / .download-btn-container family — they only
   appear in resource contexts so they belong with the cluster. */

/* ---------- Grid wrapper ---------- */

.resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(273px, 1fr));
    gap: 20px;
    flex-wrap: wrap;
}

/* ---------- Card ---------- */

.resource-card {
    min-height: 273px;
    display: flex;
    flex-direction: row;
    background-color: var(--color-surface);
    border: 1px solid var(--color-hairline);
    width: 100%;
}

/* Two contexts diverge here:
   - .resource-card-left (static listing / .all-news-wrapper):
       style.css originally said width:205px/padding:20px, but
       utilities.pcss followed up with 200/10, which is what production
       actually rendered. Smaller values preserved here.
   - .product-resources__card .left-content (slider context — used
       inside .swiper-assets-card.product-resources__card): keeps the
       original 205/20 values. The width is masked by slider.css's
       `.swiper-assets-card .left-content { width: 100%; max-width: 205px }`
       so only the padding matters in practice — 20px gives the image
       enough vertical breathing room that aspect-ratio:3/4 doesn't
       overflow the 250px card height. Conflating the two contexts
       (using 10px padding here) makes the image overflow ~10px below
       the card on the product detail page's "Resources" slider. */

.resource-card-left,
.product-resources__card .left-content {
    position: relative;
}

.resource-card-left {
    width: 200px;
    padding: 10px;
}

.product-resources__card .left-content {
    width: 205px;
    padding: 20px;
}

.resource-container .resource-card-image,
.product-resources__card img {
    box-shadow: 4px 6px 8px 0 rgba(0, 0, 0, 0.2);
    /* No `aspect-ratio` here so each image keeps its natural ratio,
       but cap height and contain so taller sources (e.g. the
       Why-Choose-Puma thumbnail) don't spill past the card frame. */
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.resource-card-image {
    width: auto;
    display: block;
    height: 100%;
    max-width: 200px;
    max-height: 240px;
}

/* Note: the original style.css base set width:auto, max-width:191px,
   min-height:270px and no padding override; utilities.pcss followed up
   with width:100%; max-width:100%; padding:0 which is what production
   actually renders. Merged here as the canonical rule. */

.resource-card-image-embedded {
    width: 100%;
    max-width: 100%;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
    height: 100%;
    min-height: 270px;
    padding: 0;
}

.resource-card-image.video {
    padding: 0;
    width: min(105%, 205px);
    height: 100%;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
}

.resource-card-right {
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    width: 100%;
    /* utilities.pcss used a doubled-selector hack
       (.resource-card-right.resource-card-right) with --max-width: 100%
       to enforce full max-width over the (now removed) style.css base.
       Folded into the base rule here. */
    max-width: 100%;
    justify-content: space-between;
}

/* ---------- Details column ---------- */

.resource-card-details h2 {
    font-family: Helvetica;
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: var(--fh-25);
    letter-spacing: 0.02em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
}

.resource-card-details .month {
    font-family: Helvetica;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--fh-18);
    letter-spacing: 0;
    text-align: left;
    color: var(--color-muted);
    padding-bottom: 20px;
}

.resource-card-details .context,
.assets-card-details-container .context {
    padding-top: 20px;
    font-family: Helvetica;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--fh-22);
    letter-spacing: 0;
    text-align: left;
    color: var(--color-brand);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assets-card-details-container .context {
    -webkit-line-clamp: 3;
}

/* ---------- Download / CTA buttons ---------- */

/* B1: .download-btn and .download-btn--dark retired. All markup now
   uses .btn .btn--primary (or .btn .btn--dark for the dark variant),
   with .full-width preserved as the width:100% layout utility. */

/* The Sprig filter download buttons (videos, catalogues, case
   studies, product-downloads) render `<a class="btn btn--primary">`
   directly without .full-width. The original .download-btn rule
   had width:100% baked in — re-establish that here scoped to the
   resource card context so the buttons span the full card width. */

.resource-card .btn,
.resource-card-right .btn,
.product-resources__card .btn {
    width: 100%;
}

/* Distinct from .download-btn — used by articleMatrix.twig's
   downloadButtons case for outline-style asset CTAs. */

.download-btns {
    font-family: Helvetica;
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 16.1px;
    letter-spacing: 0.05em;
    text-align: left;
    padding: 15px 20px;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
}

.download-btn-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 100%;
    flex-wrap: wrap;
}

/* ---------- Video label / embed ---------- */

.video-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.video-embed-full {
    padding: 80px;
}

/* ---------- Pagination ---------- */

.resource-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.resource-pagination button {
    background-color: transparent;
    border: 1px solid var(--color-hairline);
    padding: 5px 10px;
    cursor: pointer;
}

.resource-pagination .active {
    background-color: var(--color-brand);
    color: var(--color-on-brand);
}

/* ---------- Responsive breakpoints ---------- */

@media screen and (max-width: 768px) {
    .resource-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .resource-card {
        width: 100%;
        flex: 0 1 100%;
    }
}

@media (max-width: 531px) {
    .resource-card {
        width: 100%;
        flex-direction: column;
        height: auto;
        max-height: unset;
    }
    .resource-card-left {
        width: auto;
        height: 60%;
        margin: 0 auto;
    }
    .resource-card-details .context {
        text-align: center;
    }
    .resource-card-details {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* B1: .download-btn responsive width:100% override removed —
       all production markup now carries the .full-width utility. */
}

@media (max-width: 530px) {
    .resource-card-left {
        width: 100%;
    }
    .resource-card-image {
        -o-object-fit: contain;
           object-fit: contain;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
    }
}

/* ---------- Page-context overrides ---------- */

/* Case-studies pages tighten the line-clamp on the card body. */

.casestudies .resource-card-details .context {
    -webkit-line-clamp: 4;
}

/* Calendar resource page lets the download button row fill the
   container. */

.trader-2024-calendar .download-btn-container {
    --content-max-width: 100%;
}

/* Revit listing flips proportions slightly above 480px so the right
   column doesn't pinch. Doubled-selector specificity preserved as it
   was in utilities.pcss. */

@media (min-width: 480px) {
        .revit-resources.revit-resources .resource-card-left {
            padding: 0;
        }
        .revit-resources.revit-resources .resource-card-right {
            max-width: 375px;
            flex: 1 0 65%;
        }
}

/* templates/css/style/components/_hero_slider.pcss
   Home page top hero — image carousel. Container is .swiper.swiper-hero,
   each slide is a .swiper-slide.hero-slider wrapping a .hero-img.

   Includes the .swiper-hero .swiper-pagination-bullet[-active] rules
   shared with .footer-app pagination (moved in A4h alongside the
   app-promo migration). The .swiper-hero .swiper-wrapper rule shared
   with .app-promo-section lives in _app_promo.pcss alongside the
   matching .app-promo-section .swiper-wrapper rule.
*/

.hero-slider {
    text-align: center;
    font-size: 18px;
    background: var(--color-surface);
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-slider .hero-img {
    height: auto;
    width: 100dvw;
}

/* ---------- Pagination bullets ---------- */

/* Shared with .footer-app pagination — same circle outline + filled-on-
   active visual. The .footer-app selector matches the app-promo footer
   pagination on the home page. */

.swiper-hero .swiper-pagination-bullet,
.footer-app .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border: 1px solid var(--color-on-brand);
    background: none;
}

.swiper-hero .swiper-pagination-bullet-active,
.footer-app .swiper-pagination-bullet-active {
    background: var(--color-on-brand);
}

/* ---------- .hero-img sizing override (homepage video hero) ---------- */

/* Doubled-selector specificity hack — preserved from legacy. Forces
   width/height 100% and resets aspect-ratio so the inline-styled video
   isn't constrained by parent ratios. */

.hero-img.hero-img {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
}

/* templates/css/style/components/_swiper_buttons.pcss
   Generic Swiper navigation-button styling. Used across every slider
   that has prev/next arrows (featured product, cross-listing, content
   card, asset card, event card, testimonial card, etc.).

   Two patterns:
   1. .swiper-content-card-button is a floating row centered vertically
      over the swiper, with prev on the left and next on the right
      (pointer-events: none on the row, restored on the buttons so the
      gap between them stays clickable on the content beneath).
   2. .swiper-content-card-buttons (plural) is the outer wrapper that
      lives BELOW the swiper, used by carousels with a "view all" CTA
      between the prev/next arrows.

   Out of scope for this batch (still in slider.css):
   - .swiper-assets-card / .swiper-team-card { position: relative }
     (positioning context for assets-slider buttons — folds in with
     the assets/team batch)
   - .assets-slider-wrapper.assets-heading rules (same)
*/

/* ---------- Generic prev/next reset ---------- */

/* Swiper ships its own positioned arrow buttons. The legacy CSS
   replaces them with inline SVG icons rendered by the markup, so all
   the Swiper-default positioning/sizing needs to be unset. The
   !importants are deliberate — Swiper's runtime styles target the
   same selectors. */

.swiper-button-prev,
.swiper-button-next {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    padding: 10px !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    background-image: none !important;
    height: unset !important;
    margin-top: unset !important;
}

/* Swiper paints a default ">" arrow via ::after; the markup provides
   an inline SVG instead, so blank out the pseudo-element content. */

.swiper-content-card-button [class^="swiper-button-"]::after {
    content: "";
}

/* ---------- Floating button row (singular) ---------- */

.swiper-content-card-button {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    pointer-events: none;
    z-index: 10;
}

/* Re-enable pointer events on the buttons themselves so the gap
   between prev and next stays click-through to underlying content. */

.swiper-content-card-button .swiper-button-prev,
.swiper-content-card-button .swiper-button-next {
    pointer-events: auto;
}

/* D3: offset the centered arrow button row down by 40px inside the
   asset-card carousels (product resources slider, revit slider).
   Without this offset the buttons sit mid-card and overlap the
   image; the legacy inline `style="padding-bottom: 80px"` baked
   the offset into each markup site. */

.swiper-assets-card .swiper-content-card-button {
    padding-bottom: 80px;
}

/* D3: white-circle arrow buttons used by the events / featured-
   product / latest-news sliders (overlaying the card carousel).
   Migrated from per-element inline styles in those 3 templates.
   `.assets-card-prev/next` intentionally NOT included — those use
   the default rectangular Swiper rendering. */

.content-card-prev,
.content-card-next,
.featured-card-prev,
.featured-card-next {
    background-color: var(--color-on-brand);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    cursor: pointer;
}

/* Safari zoom fix — force a 48×48 box on the arrow buttons. */

.swiper-content-card-button .swiper-button-prev,
.swiper-content-card-button .swiper-button-next {
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* SVG sizing inside the arrow buttons. */

.swiper-content-card-button .swiper-button-prev svg,
.swiper-content-card-button .swiper-button-next svg {
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
}

/* ---------- Bottom button row (plural) ---------- */

/* Used by carousels with prev/next + a CTA below the swiper. */

.swiper-content-card-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    pointer-events: auto;
}

/* ---------- Disabled prev/next button state ---------- */

/* Swiper adds .swiper-button-lock to a nav button when the slider is
   at the start/end and can't go further. Visually muted, no pointer. */

.swiper-button-lock {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

/* ---------- Pagination bullets ---------- */

/* Generic dot indicators below sliders. */

.swiper-pagination-bullet {
    border: 1px solid var(--color-brand);
    opacity: 100;
}

.swiper-pagination-bullet-active {
    background: var(--color-on-brand);
}

/* Larger variant used by carousels that want a more prominent
   pagination row (custom-slider-pagination). */

.custom-slider-pagination > .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    border: 1px solid var(--color-accent);
    opacity: 100;
}

/* templates/css/style/components/_news_slider.pcss
   News + content-card + event-card slider family. Used by:
   - _custom_slider_news.twig, _latest_news.twig (news)
   - _events.twig (events)
   - Several content-card sliders that use .swiper-content-card
   - .fb-slider* (Facebook carousel)

   IMPORTANT cascade note: the original style.css rule
   `.swiper-content-card .card, .swiper-event .card, .news-wrapper .card`
   has been SPLIT in this migration. Only the .swiper-content-card and
   .swiper-event selectors move here; the .news-wrapper .card portion
   stays in slider.css until A4d closes out the featured / cross-card
   cluster atomically. Moving .news-wrapper .card to app.css alone
   would defeat slider.css's `.swiper-featured-card .card { display:
   grid }` for the homepage featured-products carousel (same cascade
   trap as the A2c regression). */

/* ---------- Slider container widths ---------- */

.swiper-content-card,
.swiper-event,
.swiper-event-card {
    width: 100%;
    /* D3: positioning context for the absolute .swiper-content-card-
       button row (was previously a per-markup inline style). */
    position: relative;
}

.news-slider-wrapper,
.slider-wrapper {
    padding-bottom: 30px;
}

.fb-slider {
    padding-block: 40px;
}

.news-slider {
    padding-top: 30px;
}

@media screen and (max-width: 1200px) {
    .news-slider {
        padding-top: 30px;
    }
}

/* ---------- Slider title row ---------- */

/* .news-slider-content / .slider-content / .testimonials-slider-content /
   .fb-slider-content all share the centered flex column for the
   heading + subheading row above each carousel. */

.news-slider-content,
.slider-content,
.testimonials-slider-content,
.fb-slider-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.fb-slider-content {
    margin-bottom: 60px;
}

.fb-slider-content .content {
    font-family: Helvetica;
    font-size: 25px;
    font-weight: 400;
    line-height: 35px;
    text-align: center;
    color: var(--color-muted);
}

.fb-slider-content .header {
    text-align: center;
}

.testimonials-slider-content {
    padding-top: 80px;
}

.news-slider .n-header,
.slider-content .n-header,
.fb-slider .header {
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 2.25rem;
    color: var(--color-brand);
}

.news-content-container {
    margin-top: 0.9375em;
    margin-bottom: 3.75em;
}

/* `.fb-slider .content` is a typo in the source — should be .fb-slider.
   Preserved verbatim for visual neutrality; the typo'd selector
   matches nothing in production so it's effectively dead. Cleanup
   deferred to a naming pass. */

.news-slider .news-content,
.slider-content .news-content,
.fb-slider .content {
    font-weight: 400;
    font-size: var(--fs-20);
    color: var(--color-muted);
}

/* ---------- Card inside .swiper-content-card / .swiper-event ---------- */

/* SPLIT from the original 3-selector grouping — see header note. */

.swiper-content-card .card,
.swiper-event .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-width: 537px;
    border: 1px solid var(--color-hairline);
    background-color: var(--color-brand);
}

@media (min-width: 500px) and (max-width: 2000px) {
    .swiper-content-card .card,
    .swiper-event .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        border: 1px solid var(--color-hairline);
        background-color: var(--color-brand);
    }
    .slide-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0 20px 20px 20px;
        height: 201px;
    }
}

@media screen and (max-width: 1200px) {
    .swiper-content-card .card {
        margin-left: 0;
    }
}

@media screen and (max-width: 620px) {
    .swiper-content-card .card {
        width: 20em;
        height: unset;
    }
    .swiper-content-card .card img {
        width: 100%;
    }
}

.swiper-content-card .card img {
    z-index: 10;
}

/* ---------- Event-wrapper ---------- */

/* Wrapper around the event-card swiper — kept the legacy
   height-unset + left-margin override verbatim. */

.event-wrapper {
    height: unset !important;
    margin-left: 50px !important;
}

.event-wrapper img {
    width: auto;
    height: 469px;
    -o-object-fit: contain;
       object-fit: contain;
}

/* ---------- Slide content cluster ---------- */

/* Inner content of each news/event slide — header, date, body text,
   CTA link. The .slide-content @500-2000px override (margin) lives
   above in the same @media block; this is the base. */

.slide-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 30px 20px 20px 20px;
    height: 201px;
}

.slide-content .header {
    display: block;
    font-size: 1.25rem;
    line-height: 1.4375rem;
    color: var(--color-on-brand);
    padding-bottom: 5px;
}

.slide-content .slide-date {
    font-weight: 400;
    font-size: 1rem;
    color: var(--color-hairline);
    line-height: 1.15rem;
    padding-bottom: 30px;
}

.slide-content .content-text {
    font-weight: 400;
    color: var(--color-on-brand);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.content-text p {
    color: var(--color-on-brand);
}

.slide-content .slide-link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    padding: 15px 20px;
    line-height: 16.1px;
    background-color: var(--color-accent);
    color: var(--color-brand);
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
    height: 40px;
}

.slide-context {
    display: flex;
    flex-direction: column;
}

/* templates/css/style/components/_featured_card.pcss
   Featured-product + cross-listing card cluster. Used by:
   - _components/_slider/_featured_product.twig (homepage "Check out
     these featured products")
   - _components/_listing/_product_cross_listing.twig (product detail
     "You might also like")

   Markup pattern:
     <div class="swiper swiper-featured-card">
       <div class="swiper-wrapper product-cross-card OR news-wrapper">
         <div class="swiper-slide card">
           <div class="products-container">     ← grid col 1
             <div class="overlay-container">    ← image carousel
               ...
             </div>
           </div>
           <div class="featured-card-right-container"> ← grid col 2
             ...
           </div>
         </div>

   IMPORTANT cascade ordering:
   1. `.product-cross-card .card` and `.news-wrapper .card` set display:
      flex (the news-card visual). They MUST be declared BEFORE
      `.swiper-featured-card .card` (grid 2-col) in this file, because
      same-specificity later rules win the cascade.
   2. The cross-listing context has `.cross-listing-wrapper .product-
      cross-card .card` and `.cross-listing-wrapper .overlay-container`
      overrides in _product_card.pcss (step 5b) — higher specificity,
      always wins. */

/* ---------- News-wrapper card base ---------- */

/* (Was deferred from A4c because it shared a 3-selector grouping with
   .swiper-content-card .card / .swiper-event .card. Moves atomically
   with the featured-card cluster below so the cascade is preserved.) */

.news-wrapper .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-width: 537px;
    border: 1px solid var(--color-hairline);
    background-color: var(--color-brand);
}

@media (min-width: 500px) and (max-width: 2000px) {
    .news-wrapper .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        border: 1px solid var(--color-hairline);
        background-color: var(--color-brand);
    }
    .news-wrapper .overlay {
        position: relative !important;
        height: 200px !important;
    }
}

/* ---------- Cross-card slide (.product-cross-card) ---------- */

.product-cross-card .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--color-hairline);
    background-color: var(--color-brand);
}

/* ---------- Featured-card slider container ---------- */

.swiper-featured-card {
    width: 100%;
    /* D3: positioning context for the absolute .swiper-content-card-
       button arrow row (was previously inline style). */
    position: relative;
}

/* The 2-column grid layout for featured + cross-card variants.
   Must come AFTER .product-cross-card .card above so it wins for
   the cross-listing context (which has BOTH .swiper-featured-card
   AND .product-cross-card ancestors). */

.swiper-featured-card .card,
.swiper-cross-card .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--color-hairline);
    background-color: var(--color-surface);
}

/* ---------- Overlay container (left grid column, image carousel) ---------- */

.swiper-featured-card .overlay-container,
.swiper-cross-card .overlay-container {
    width: 50%;
    display: flex;
    position: absolute;
    bottom: 0;
    color: #f1f1f1;
    text-align: center;
    justify-content: center;
    gap: 5px;
    padding-bottom: 15px;
    border-right: 1px solid var(--color-hairline);
}

/* Base .overlay-container — always full height inside its grid cell. */

.overlay-container {
    height: 100%;
    padding-bottom: 0 !important;
}

/* ---------- Mobile collapse @539px ---------- */

/* Cards switch from 2-col side-by-side to 2-row stacked. The
   `.card.card` doubled-selector specificity hack is preserved
   verbatim — needed to win over the base grid rule above. */

@media screen and (max-width: 539px) {
    .swiper-featured-card .card.card,
    .swiper-cross-card .card {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
        width: 100%;
        border: 1px solid var(--color-hairline);
        height: 492px;
    }
    .swiper-featured-card .overlay-container {
        width: 100%;
        height: 50%;
        bottom: unset;
        top: 0;
        position: fixed;
    }
    .product-card-content.row.product-card-content.row {
        max-width: 100%;
    }
    .swiper-featured-card .product-card-content.product-card-content {
        height: 100%;
    }
}

/* ---------- News-wrapper overlay (image badge + "NEW" tag) ---------- */

.news-wrapper .overlay img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.news-wrapper .overlay .is-new {
    position: absolute;
    background-color: var(--color-brand);
    padding: 15px;
    z-index: 15;
    top: 0;
    right: 0;
}

.news-wrapper .overlay .is-new a {
    color: var(--color-surface-alt);
    font-weight: 700;
    line-height: 18.4px;
    letter-spacing: 3%;
    font-size: 1em;
}

.news-wrapper .overlay {
    position: relative;
    height: 267px;
}

/* ---------- Featured-card typography (right column) ---------- */

.swiper-featured-card .heading,
.swiper-cross-card .heading {
    margin-bottom: 5px;
}

.swiper-featured-card .card-heading {
    font-size: clamp(18px, 4vw, 20px);
    line-height: var(--fs-25);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-brand);
}

.swiper-featured-card .card-subheading {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.15rem;
    color: var(--color-muted);
}

.swiper-featured-card .card-content {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.375rem;
    color: var(--color-brand);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swiper-featured-card .btn {
    border-radius: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.006rem;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s, color 0.3s;
    height: 40px;
    text-transform: uppercase;
}

/* ---------- Products-container (image column) divider ---------- */

/* Vertical hairline separating the image grid cell from the content
   grid cell. */

.products-container {
    border-right: 1px solid var(--color-hairline);
}

/* ---------- Home-page products slider wrapper ---------- */

/* Used by _featured_product.twig as the outer wrapper for the
   "featured products" carousel block. */

.home-products-slider-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

/* Outer section background — migrated from inline style on the
   cross-listing template (D3). */

.home-products-slider {
    background-color: var(--color-surface);
}

/* Dropped: legacy `.wiper-featured-card { width: 100% }` typo'd
   selector — matched no production markup. Removed in E2. */

/* ---------- Product slide image / video ---------- */

.product-img {
    max-width: 100%;
    height: auto;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

@media screen and (min-width: 1920px) {
    .product-img {
        -o-object-fit: contain !important;
           object-fit: contain !important;
    }
}

/* .product-vid is positioned `position: fixed` in legacy — likely a
   bug (pins the video viewport-relative). Preserved verbatim; behaviour
   audit is out of scope. */

.product-vid {
    max-width: 100%;
    height: auto;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    top: 18%;
    left: 0;
    position: fixed;
}

/* Min-height on the products-container at 540px+ — ensures featured-
   product cards don't collapse below 330px height on small viewports. */

@media screen and (min-width: 540px) {
    .products-container {
        min-height: 330px;
    }
}

.products-container-result {
    border: 1px solid var(--color-hairline);
    height: 330px;
}

.products-container-right {
    background-color: var(--color-surface);
}

/* ---------- Product range wrapper ---------- */

/* Padding for the .product-range slider section that lives below the
   featured-products carousel on the home page. */

.product-range-wrapper {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* ---------- Featured-card right column (content side) ---------- */

/* `.featured-card-right-container` is the grid cell on the right side
   of each featured-product slide. `.featured-card` is the flex-column
   wrapper around the title + paragraph + CTA stack inside that cell.
   `.featured-card-button` is the bottom-aligned CTA stack. */

.featured-card-right-container {
    position: relative;
    background: var(--color-surface);
}

.featured-card {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.featured-card-button {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    gap: 15px;
}

/* templates/css/style/components/_product_image_slider.pcss
   Product detail page image carousel + thumbnail strip. Used by
   _products/_generic.twig and _products/_merchandise.twig:

   - .product-slider-wrapper       outer wrapper (mobile sizing)
   - .swiper-product-image         main image swiper
   - .product-slides               slide content (each main image)
   - .product-slider-thumbs        thumbnail strip below
   - .gallery-slider / .gallery-thumbs    alternate selectors for the
                                          same pattern in some templates

   Also includes:
   - .swiper-slide img             VERY generic base rule for all
                                   swiper-slide imgs site-wide. Lower
                                   specificity than .swiper-assets-card
                                   .left-content img, .news-wrapper
                                   .overlay img, etc., so this base
                                   rule loses to per-context overrides.
                                   Kept here because it appears between
                                   the product-slider-thumbs rules in
                                   the legacy source.
   - .thumbs-button-next/prev      thumb-strip navigation arrows (a
                                   product-slider-specific variant of
                                   .swiper-button-prev/next — kept here
                                   for cohesion rather than dropped
                                   into _swiper_buttons.pcss).
*/

/* ---------- Main image swiper ---------- */

.swiper-product-image {
    width: 100%;
    height: 100%;
}

.product-slides {
    z-index: 500;
    width: 100% !important;
    /* D3: positioning context for the absolute `.vr-icon` 360° badge
       overlaid on the slide (was previously inline style). */
    position: relative;
}

.product-slides img {
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 99.5%;
}

.product-slides .video-embed {
    height: 100%;
}

.product-slides .video-embed iframe {
    width: 100%;
    max-height: 100%;
}

/* ---------- Mobile responsive ---------- */

@media screen and (max-width: 768px) {
    .product-slider-wrapper {
        height: 30dvh;
        max-height: 35dvh;
    }
    .gallery-slider .swiper-slide {
        height: 100%;
    }
    .product-slides img {
        height: 100%;
        width: auto;
    }
    .product-slider-thumbs {
        display: flex !important;
        flex-direction: column;
    }
}

@media screen and (max-width: 990px) {
    .product-slides img {
        width: 100%;
    }
}

/* ---------- Generic slide image base ---------- */

/* Lower specificity than per-context rules — covers slides that don't
   have a more-specific image rule (gallery sliders, hero swiper, etc.). */

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    -o-object-fit: cover;
       object-fit: cover;
}

.product-grid-container .swiper-slide img {
        display: block;
        height: 325px;
        margin: 0 auto;
    }

/* ---------- Thumbnail strip ---------- */

.product-slider-thumbs {
    margin-top: 20px;
    height: 20%;
    overflow: hidden;
    box-sizing: border-box;
}

.product-slider-thumbs img {
    width: 100px;
    height: 100px;
}

.product-slider-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
    padding: 0;
    overflow: hidden;
}

.product-slider-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 3px solid var(--color-accent);
}

.product-slider-thumbs-wrapper .thumbnail {
    width: 100px;
    height: 100px;
    text-align: center;
    overflow: hidden;
    opacity: 0.1;
}

/* ---------- Thumb-strip nav arrows ---------- */

.thumbs-button-next,
.thumbs-button-prev {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    width: 60px !important;
    padding: 10px !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    background-image: none !important;
    height: unset !important;
    margin-top: unset !important;
    top: 10%;
}

.product-slider-thumbs-wrapper [class^="swiper-button-"]::after {
    content: "";
}

.thumbs-button-next::after,
.thumbs-button-prev::after {
    content: "";
}

/* Position the thumb-strip arrows at the left/right edges of the
   thumbnail row. The shared box-styling lives in the
   `.thumbs-button-next, .thumbs-button-prev` rule above. */

.thumbs-button-prev {
    left: 0;
    transform: translate(0, 35%);
}

.thumbs-button-next {
    right: 0;
    transform: translate(0, 35%);
}

/* ---------- Gallery (.gallery / .gallery-slider / .gallery-thumbs) ---------- */

/* An alternate selector chain used by the product detail page for the
   main image carousel + thumb strip (vs the .swiper-product-image /
   .product-slider-thumbs* chain above). */

.gallery {
    width: 100%;
    max-width: 620px;
    margin: 40px auto;
    overflow: hidden;
}

.gallery-slider {
    width: 100%;
    height: 587px;
    margin: 0 0 10px 0;
}

.gallery-slider .swiper-slide {
    width: auto;
    height: auto;
    border: 1px solid var(--color-hairline);
}

.gallery-thumbs {
    width: 70%;
    padding: 0;
    overflow: hidden;
    margin: 0 auto;
}

.gallery-thumbs .swiper-slide {
    width: 100px !important;
    height: 100px;
    text-align: center;
    overflow: hidden;
    opacity: 0.5;
    border: 1.5px solid var(--color-hairline);
}

.gallery-thumbs .swiper-slide-active {
    opacity: 1;
    border: 3px solid var(--color-accent);
}

.gallery-thumbs .swiper-slide img {
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

/* ---------- Thumb-row container ---------- */

.thumb-btn {
    z-index: 10;
    position: sticky;
    transform: translateY(50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* ---------- Splide gallery (alt library) ---------- */

/* Some product pages use the Splide slider instead of Swiper for the
   image gallery. */

.splide__slide img {
    width: 100%;
    height: auto;
}

.splide__slide {
    opacity: 0.3;
}

.splide__slide.is-active {
    opacity: 1;
}

/* ---------- Video embeds inside the gallery ---------- */

.video-embed iframe {
    width: 100%;
    max-height: 500px;
}

.hero-video-embed {
    width: 100%;
}

.hero-video-embed iframe {
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    width: 100dvw;
}

.video-embed-full iframe {
    width: 90dvw;
    height: 80dvh;
}

/* templates/css/style/components/_reviews_slider.pcss
   Reviews carousel + review-grid card. Used by:
   - _components/_reviews/_product_reviews.twig
   - _comments/_includes/form*.twig submitted-review display

   Two layouts:
   - .swiper-reviews-card: horizontal carousel inside .reviews-wrapper
   - .review-grid-slider:  large featured review card with brand bg
                           and lime accent bottom border. */

/* ---------- Reviews wrapper + swiper container ---------- */

.reviews-wrapper {
    height: unset !important;
    margin-left: 50px !important;
    margin-bottom: 60px;
}

.swiper-reviews-card {
    margin-bottom: 80px;
}

.swiper-reviews-card .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: clamp(300px, 50%, 539px) !important;
    border-bottom: 5px solid var(--color-accent);
    background-color: var(--color-brand);
    margin-right: 40px;
}

/* ---------- Review slide (.slide-reviews) ---------- */

.slide-reviews {
    padding: 0;
}

.slide-reviews img {
    width: clamp(200px, 100%, 417px);
    height: 209px;
    margin-bottom: 40px;
}

.slide-reviews svg {
    margin-bottom: 40px;
}

.slide-reviews .description {
    display: block;
    color: var(--color-on-brand);
    font-weight: 400;
    font-style: italic;
    font-size: var(--fs-lead);
    line-height: var(--fh-27);
    letter-spacing: 0.02em;
}

.slide-reviews .name {
    color: var(--color-accent);
    font-weight: 700;
    font-size: var(--fs-200);
    line-height: var(--fh-27);
    margin-bottom: 25px;
}

.slide-reviews .location {
    font-weight: 400;
    font-size: var(--fs-lead);
    line-height: var(--fh-22);
    color: var(--color-hairline);
}

/* Description container for the truncate/expand pattern. */

.product-review-description-container {
    position: relative;
    margin-bottom: 60px;
}

/* `.read-more-btn` is a TEXT LINK (display: inline) inside the review
   description, NOT a button — checklist correction logged in step B
   batch 1. Should NOT be migrated to `.btn`. */

.read-more-btn {
    display: inline;
    color: var(--color-accent);
    cursor: pointer;
}

/* ---------- Review grid card (large featured) ---------- */

.review-grid-slider {
    margin-top: 80px;
    margin-bottom: 80px;
}

.review-grid-card {
    max-width: 500px;
    min-width: 300px;
    background-color: var(--color-brand);
    border-bottom: 5px solid var(--color-accent);
    color: var(--color-on-brand);
    display: flex;
    flex-direction: column;
    padding: 70px 60px;
}

@media screen and (max-width: 650px) {
    .review-grid-slider {
        padding-left: 0;
    }
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 520px) {
    .review-container {
        padding: 12px;
    }
}

/* templates/css/style/components/_wholesalers_slider.pcss
   Wholesalers logo carousel — used by the home page wholesalers
   slider, the find-a-wholesaler page, and the about-us wholesaler
   landing.

   Markup pattern:
     <div class="swiper swiper-wholesalers-logo">
       <div class="swiper-wrapper wholesalers-wrapper">
         <div class="swiper-slide card">
           <a class="home-btn">...</a>
         </div>
*/

/* Empty .wholesalers-wrapper rule (body fully commented in legacy)
   dropped. */

/* Shared 537px mobile spacing — applies to the news, wholesalers,
   testimonial, team and slider-container wrappers. Kept as a
   multi-selector rule to match the legacy source. */

@media screen and (max-width: 537px) {
    .news-wrapper,
    .wholesalers-wrapper,
    .testimonial-wrapper,
    .team-wrapper,
    .slider-container {
        margin-top: 10px !important;
    }
}

/* Dropped: legacy `.Wholesalers-wrapper .card { margin-right: 60px;
   width: auto }` rule. The markup uses lowercase `.wholesalers-wrapper`,
   so the PascalCase selector matched nothing. The active rule for
   `.wholesalers-wrapper .card` lives in style.css and sets
   `--bs-card-border-width: 0; width: auto`. Removed in E1. */

/* Wholesalers landing-page CTA — the "Find a Wholesaler" home button. */

#wholesalers-logo .home-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    padding: 15px 20px;
    line-height: 1.006rem;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s, color 0.3s;
    height: 40px;
    text-transform: uppercase;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

/* Linear transition for the Wholesalers logo loop. */

.swiper-wholesalers-logo .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Wholesaler-icon thumb aspect-ratio. Doubled-selector specificity
   hack preserved from legacy. */

.wholesalerIcon-thumb.wholesalerIcon-thumb {
    width: auto;
    aspect-ratio: 16 / 9;
}

/* templates/css/style/components/_fb_slider.pcss
   Facebook social-feed carousel. Used by _components/_slider/
   _facebook_carousel.twig.

   Markup pattern:
     <div class="swiper swiper-fb">
       <div class="swiper-wrapper swiper-fb-wrapper">
         <div class="swiper-slide card">
           <div class="fb-card-container">
             <img>
             <div class="fb-card-content">...</div>
*/

.swiper-fb {
    width: 100%;
}

.swiper-fb-wrapper .card {
    width: 300px;
    height: 300px;
}

/* Linear transition for the auto-scrolling FB loop. */

.swiper-fb .swiper-wrapper {
    transition-timing-function: linear !important;
}

.fb-card-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--color-brand);
    justify-content: center;
    gap: 5px;
}

.fb-card-container img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 1 / 1;
}

.fb-card-container .fb-card-content {
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

/* templates/css/style/components/_app_promo.pcss
   Footer "Get the Trader App" promo banner — used by
   _components/_slider/_promo_footer.twig and _promo_app.twig.

   Markup pattern:
     <section class="app-promo-section">
       <div class="swiper-wrapper app-promo-wrapper">
         <div class="swiper-slide app-promo-slide">
           <div class="app-promo-image">...</div>
           <div class="app-promo-content">
             <h2>...</h2>
             <p>...</p>
             <span class="text-last-app">...</span>
             <ul class="app-features"><li>...</li></ul>
             <div class="store-buttons">
               <a class="store-button"><img></a>
*/

.app-promo-section {
    display: flex;
    justify-content: center;
    background-color: var(--color-brand);
    color: var(--color-on-brand);
}

.app-promo-wrapper {
    height: unset !important;
}

.app-promo-slide {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

/* Doubled-selector specificity hack preserved from legacy. */

.app-promo-image.app-promo-image img {
    max-width: 100dvw;
    aspect-ratio: unset;
}

.app-promo-content {
    padding-top: 2.156rem;
    height: 100%;
}

.app-promo-content h2 {
    font-size: 1.875em;
    line-height: 2.25rem;
    font-weight: 700;
    padding-bottom: 0.938rem;
}

.app-promo-content p {
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1.875rem;
    color: var(--color-on-brand);
    margin-bottom: 40px;
}

.app-promo-content ul:before {
    content: attr(aria-label);
    font-size: var(--fs-body);
    line-height: 1.375rem;
    color: var(--color-accent);
    margin-bottom: 22px;
}

.text-last-app {
    font-size: var(--fs-body);
    line-height: 1.375rem;
    color: var(--color-accent);
    margin-bottom: 22px;
}

.app-features {
    margin-bottom: 40px;
}

.app-features li {
    margin-top: 10px;
    list-style: disc;
    margin-left: 15px;
}

.store-buttons {
    display: flex;
    gap: 10px;
}

.store-button img {
    display: unset !important;
    width: 121px !important;
    height: unset !important;
}

/* Stack vertically below 768px. */

@media (max-width: 768px) {
    .app-promo-slide {
        flex-direction: column;
    }

    .app-promo-section {
        flex-direction: column;
        text-align: center;
        padding-top: 0;
    }

    .app-promo-image {
        --space-m: 0;
        margin-bottom: var(--space-m: ); /* preserved from legacy — invalid CSS */
    }

    .app-promo-content h2,
    .app-promo-content p {
        text-align: center;
        width: 100%;
    }

    .store-buttons {
        flex-direction: row;
        justify-content: center;
        padding-bottom: 10px;
    }
}

/* Swiper container override — full-width edge-to-edge. */

.app-promo-section.swiper {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

/* Shared with .swiper-hero (deferred from A4a) — both sliders need
   the swiper-wrapper to span the full width without the Swiper-default
   inline padding. */

.app-promo-section .swiper-wrapper,
.swiper-hero .swiper-wrapper {
    max-width: 100%;
    margin-inline: 0;
}

/* ---------- Footer pagination (absolute-positioned dot row) ---------- */

/* Sits below the carousel content, right-aligned. Hidden on mobile. */

.footer-pagination {
    display: flex;
    position: absolute;
    width: 100%;
    height: auto;
    justify-content: flex-end;
    bottom: 0;
    align-items: center;
}

/* Clear Swiper's default >/< arrows on the footer-pagination row
   (the markup paints its own inline-SVG arrows). */

.footer-pagination [class^="swiper-button-"]::after {
    content: "";
}

@media (max-width: 768px) {
    .footer-pagination {
        display: none;
    }
}

/* ---------- Footer promo pagination + nav arrows ---------- */

/* The promo carousel below the app-promo banner — has its own visual
   chrome separate from the generic .swiper-pagination-bullet styling. */

.footer-promo-pagination {
    position: static;
    padding: 10px 25px;
    border: 1px solid var(--color-accent);
    color: var(--color-on-brand);
    width: auto;
    height: 40px;
}

.footer-promo-pagination > .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border: 1px solid var(--color-on-brand);
}

.footer-promo-pagination > .swiper-pagination-bullet-active {
    background-color: var(--color-on-brand);
}

.trader-promo-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.footer-promo-prev {
    left: 0;
    background-color: var(--color-accent);
    height: 40px;
}

.footer-promo-next {
    background-color: var(--color-accent);
    right: 0;
    height: 40px;
}

/* templates/css/style/components/_testimonials_slider.pcss
   Legacy testimonial cluster — used by the older testimonial slider
   markup (.testimonial-container / .testimonial-quote / -text /
   -author / -location). The newer home-page testimonial card uses
   the .tcard-* class chain (lives in templates/css/style/slider.pcss)
   plus the .testimonial-prev / .testimonial-next round nav buttons
   (lives in style/components/_home_testimonials.pcss).

   IMPORTANT: this file owns the older selectors. Don't conflate with
   the newer .tcard / .testimonial-prev rules until a designer call
   confirms one or the other is dead. Both still render in production
   from different fixtures. */

/* ---------- Testimonial container (the slide body) ---------- */

/* F2: consolidated from two rules to one. The original had two
   `.testimonial-container { ... }` blocks where the second
   overrode max-width: 1200px → 940px. Merged into a single rule
   with max-width: 940px (the live winning value). */

.testimonial-container {
    max-width: 940px;
    background-color: var(--color-brand);
    color: var(--color-on-brand);
    border-bottom: 5px solid var(--color-accent);
}

/* ---------- Quote block ---------- */

.testimonial-quote {
    padding: 20px;
}

.testimonial-quote svg {
    width: max(5dvw, 80px);
    height: auto;
}

@media (max-width: 70.25rem) {
    .testimonial-quote {
        flex-wrap: wrap;
    }
}

/* ---------- Body / attribution typography ---------- */

.testimonial-text {
    font-weight: 300;
    font-style: italic;
    font-size: var(--fs-25);
    line-height: 2.188rem;
    padding-bottom: 60px;
    letter-spacing: 0.02em;
}

.testimonial-author {
    font-weight: bold;
    color: var(--color-accent);
    letter-spacing: 0.05em;
    line-height: 1.797em;
    font-size: var(--fs-25);
}

.testimonial-location {
    color: var(--color-hairline);
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1.438rem;
}

/* ---------- Testimonial swiper container ---------- */

/* Generic width-100% rule for the .testimonial-card swiper. The
   .testimonial-card .swiper-wrapper / .swiper-slide rules live in
   templates/css/style/slider.pcss (the home-page redesign). */

.testimonial-card {
    width: 100%;
    /* D3: positioning context for absolute swiper button row
       (was previously inline style). */
    position: relative;
}

/* templates/css/style/components/_legacy_button_aliases.pcss
   Temporary home for legacy button classes that haven't completed
   the B-track migration to `.btn .btn--variant`. These will be
   deleted when the styleguide alias checklist hits zero references
   in templates.

   Currently in this file:
   - .button-link / .button-link:hover   maps to .btn .btn--dark
                                         when no .rev modifier
   - .rev / .rev:hover                   maps to .btn .btn--outline
                                         in some contexts (verify
                                         before flipping)
   - .btn .btn-icon                      invalid descendant selector
                                         (markup has both classes on
                                         the same element, so this
                                         never matches). Preserved
                                         verbatim from legacy, drop
                                         in cleanup pass.
*/

/* ---------- .button-link cluster ---------- */

/* White-on-dark dark button (with hover invert). Used by ~15 twigs,
   mostly slider templates. Deferred from B-batch-1 because of the
   high usage count. */

.button-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.875rem;
    padding: 15px 20px;
    line-height: 16.1px;
    background-color: var(--color-on-brand);
    color: var(--color-brand);
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
    height: 40px;
    border: 1.5px solid var(--color-brand);
}

.button-link:hover {
    color: var(--color-on-brand);
    background-color: var(--color-brand);
}

/* ---------- .rev modifier ---------- */

/* Inverts .button-link to dark-on-on-brand. Applied alongside
   .button-link via Twig conditional (when button.buttonColour == 1). */

.rev {
    background-color: var(--color-brand);
    color: var(--color-on-brand);
}

.rev:hover {
    background-color: var(--color-on-brand);
    color: var(--color-brand);
}

/* ---------- Invalid descendant selector ---------- */

/* The markup uses class="btn-icon btn-cart btn" with all three classes
   on the same element. The legacy selector .btn .btn-icon is a
   DESCENDANT selector — it expects .btn-icon to be a child of .btn.
   It matches NOTHING in production. Preserved verbatim until the
   B-track cleanup confirms it's safe to drop. */

.btn .btn-icon {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}

/* B4: `.btn-cart` retired. The class was dropped from all 4 markup
   sites — the parent `.btn .btn--primary` wrapper (D3 round 7) now
   provides the lime + dark visual, and the inner cart anchor's text
   colour comes from cascade inheritance via the parent. */

/* templates/css/style/components/_filter.pcss
   Filter / search / pagination chrome used by the Sprig filter
   components (_all_news_filter, _category_collection_filter,
   _sprig_complex_filter, _sprig_resources_expanded,
   _sprig_resources_no_filter).

   Separate from style/expanded-filter.pcss which holds the
   `.expanded-filter-container` / `.filter-section*` / checkbox
   primitives. This file owns the resource-page chrome, sorting
   dropdown, pagination, empty-state and HTMX loading indicator. */

/* ---------- Dropdown label ---------- */

.filter-dropdown-list label {
    font-size: 14px;
    font-weight: 400;
}

/* ---------- Resource page wrapper ---------- */

.resource-wrapper {
    background-color: var(--color-surface-alt);
}

.resource-container {
    max-width: 1200px;
    margin-bottom: 60px;
}

.resource-container .heading {
    font-weight: 400;
    font-size: var(--fs-200);
    line-height: var(--fh-36);
    color: var(--color-muted);
    text-align: center;
    padding-block: 30px 60px;
}

/* ---------- Sort dropdown ---------- */

.sorting {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-block: 40px;
    --content-max-width: 1200px;
}

.sorting__dropdown {
    width: 200px;
    height: 100%;
    border: 1px solid #ccc;
    background: var(--color-surface);
    position: relative;
}

/* ---------- News / filter result container ---------- */

.news {
    position: relative;
    min-height: 50px;
    background-color: var(--color-surface-alt);
    width: 100%;
}

/* ---------- Pagination ---------- */

.product-grid-pagination {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    margin-bottom: 80px;
    max-width: 1200px;
    justify-content: space-between;
    cursor: pointer;
}

.product-grid-pagination .grey svg {
    color: var(--color-hairline);
}

.product-grid-p-right svg {
    transform: scaleX(-1);
}

.product-grid-p-pages {
    display: inline-block;
}

.product-grid-p-pages a {
    font-size: var(--fs-lead);
    line-height: var(--fh-30);
    text-align: center;
    color: var(--color-brand);
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
}

.product-grid-p-pages a.active {
    color: var(--color-on-brand);
    background-color: var(--color-brand);
}

.product-grid-p-pages a:hover:not(.active) {
    background-color: var(--color-hairline);
}

/* D3: white-circle pagination arrow boxes — same visual treatment
   as `.content-card-prev/-next` in _swiper_buttons.pcss. Migrated
   from per-element inline styles in _sprig_resources_expanded
   (specifically the `<div class="product-grid-p-left">` and
   `<div class="product-grid-p-left grey">` rows). */

.product-grid-p-left,
.product-grid-p-right {
    background-color: var(--color-on-brand);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
}

.product-grid-p-left a,
.product-grid-p-right a {
    display: inline-block;
    cursor: pointer;
    pointer-events: auto;
}

/* ---------- Empty search-result state ---------- */

/* Renamed from .emtpy-search (legacy typo). */

.empty-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    margin-block: 20px;
    align-items: center;
    gap: 40px;
}

.empty-search h2,
    .empty-search a {
        text-align: center;
    }

@media screen and (min-width: 768px) {
    .empty-search {
        margin-block: 120px;
    }
}

/* ---------- HTMX loading indicator ---------- */

.htmx-indicator {
    opacity: 0;
    display: none;
    transition: opacity 150ms ease-in;
    position: fixed;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    display: flex;
}

#fetching-message {
    opacity: 1;
    transition: opacity 150ms ease-in;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* ---------- Apply filter CTA ---------- */

.apply-button {
    justify-content: center;
    margin-bottom: 15px;
}

/* ---------- Sprig request loading overlay ---------- */

/* D3: migrated from a 7-declaration inline `style="..."` repeated
   on `<div id="filter-loading-overlay">` in 4 Sprig filter templates
   (_all_news_filter, _sprig_resources_expanded, _category_collection_
   filter, _sprig_complex_filter). The `display: none` initial state
   is in CSS — Sprig's request handlers swap to `display: flex` via
   `overlay.style.display = 'flex'` during fetch, then back to 'none'
   on completion. JS-coupling preserved. */

#filter-loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 99999;
    justify-content: center;
    align-items: center;
}

/* templates/css/style/components/_product_quote.pcss
   Product detail page cart / quote / share UI. Used by:
   - _products/_merchandise.twig (product detail page)
   - _cart/_add-to-cart.twig
   - _cart/_update-cart.twig
   - _products/_generic.twig

   Markup pattern:
     <div class="product-details-right">
       <div class="product-short-description">...</div>
       <div class="product-quote-form">
         <div class="product-quote-container">
           <div class="product-quote-quantity">
             <button>-</button><input class="qty">< button>+</button>
           </div>
           <button class="product-quote-add btn btn--primary">Add to Quote</button>
         </div>
         <div class="wishlist-container">...</div>
       </div>
       <div class="product-quote-share-container">
         <button class="product-quote-share">Share</button>
         <div class="share-menu">...</div>
       </div>
*/

/* ---------- Product short description (header text) ---------- */

.product-details-right .product-short-description,
.product-details-right .product-short-description p {
    font-weight: 400;
    font-size: var(--fs-lead);
    line-height: var(--fh-30);
    color: var(--color-muted);
}

.product-short-description {
    margin-top: 10px;
}

/* ---------- Quote form layout ---------- */

.product-quote-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product-quote-container {
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wishlist-container {
    margin-top: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
}

.product-quote-details.toggle {
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* ---------- Quantity stepper ---------- */

.product-quote-quantity {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1.5px solid var(--color-hairline);
    padding: 20px;
    width: 122px;
    height: 50px;
    justify-content: space-between;
}

.product-quote-quantity button {
    background-color: var(--color-surface);
    border: none;
    cursor: pointer;
    display: flex;
}

.product-quote-quantity .qty {
    border: none;
    text-align: center;
    width: 50px;
    font-size: 20px;
    line-height: var(--fh-30);
    font-weight: 400;
}

/* ---------- Add to quote + Share buttons ---------- */

/* .product-quote-add retired in B1 — markup now uses `.btn .btn--primary`
   directly. The unique declarations (50px height, padding-inline 16px,
   16px line-height, 10px gap, position relative) rescope to
   `.product-quote-form .btn` so the cart submit button keeps its shape.

   .product-quote-share is an outlined variant (border + transparent bg
   + brand text). It's still a standalone class — not migrated yet (no
   matching .btn--outline-lg modifier). */

.product-quote-form .btn {
    height: 50px;
    padding-inline: 16px;
    line-height: var(--fh-16);
    gap: 10px;
    position: relative;
}

.product-quote-share {
    height: 50px;
    padding-inline: 20px;
    background-color: unset;
    font-weight: 700;
    font-size: var(--fs-small);
    line-height: var(--fh-16);
    letter-spacing: 0.05rem;
    text-decoration: none;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* ---------- Share dropdown menu ---------- */

.product-quote-share-container {
    position: relative;
}

.share-menu {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    border-radius: 5px;
    padding-inline: 5px;
    z-index: 1000;
    display: flex;
    align-items: center;
    height: 50px;
    gap: 10px;
    background: var(--color-surface);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    justify-content: center;
}

.share-button {
    /* legacy empty rule body — preserved for class-hook discoverability */
}

/* D3: email share icon (`<a class="share-button email fa fa-envelope">`)
   in _add-to-cart and _update-cart. Migrated from inline
   `style="font-size: 23px; color:#a5cd39;"` — the `#a5cd39` was a
   typo for the brand accent `#a6ce39`, now tokenised. */

.share-button.email {
    font-size: 23px;
    color: var(--color-accent);
}

.close-share {
    margin-top: 10px;
    display: inline-block;
}

/* ---------- Paws (cart total counter) container ---------- */

.paws-container {
    padding-bottom: 15px;
}

/* ---------- Cart-count badge over the nav-cart icon ---------- */

.quote-cart-count-visible {
    position: absolute;
    top: -5px;
    left: -5px;
    display: flex;
    width: 15px;
    height: 15px;
    justify-content: center;
    align-items: center;
    color: var(--color-on-brand);
    border-radius: 50%;
    background-color: var(--color-brand);
}

/* templates/css/style/components/_product_spec.pcss
   Product detail page specifications / features / discover blocks.
   Used by _products/_generic.twig and _products/_merchandise.twig
   inside the .product-spec-* / .features / .discover sections of
   the right-column content.

   Markup pattern (simplified):
     <div class="product-spec-info">
       <span class="product-spec-first">Label</span>
       <span class="product-spec-content">Value</span>
     </div>
     <div class="features">
       <ul><li>feature line</li></ul>
     </div>
     <div class="discover">
       <p>...<a>link</a>...</p>
     </div>
*/

/* ---------- Product spec rows ---------- */

.product-spec-first {
    font-weight: 700;
    font-size: var(--fs-body);
    line-height: var(--fh-22);
    color: var(--color-brand);
}

.product-spec-content {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--fh-22);
    color: var(--color-muted);
}

.product-spec-info {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--fh-22);
    color: var(--color-muted);
    display: inline-flex;
    justify-content: space-between;
}

/* ---------- Features bullet list ---------- */

.features ul {
    padding-left: 15px;
}

.features li {
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--fh-22);
    color: var(--color-muted);
    list-style-type: disc;
}

.features-list .bullet {
    list-style-type: disc;
    list-style-position: outside;
}

/* ---------- Discover (related-content link block) ---------- */

.discover {
    padding-top: 10px;
    padding-bottom: 20px;
}

.discover p {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
}

.discover a {
    color: var(--color-accent);
    text-decoration: underline;
    font-weight: 700;
}

/* templates/css/style/components/_navbar_icons.pcss
   Tiny standalone file holding the right-side nav icon visibility +
   layout rules that were marooned in product.css. Touch-bait for A6
   navbar sweep: this file can fold into the future navbar component
   without ceremony — it's just three small rules. */

@media (min-width: 1200px) {
    /* Hide the mobile right-nav row on desktop. */
    .mobile-nav-right-item {
        display: none;
    }

    /* Show the desktop right-nav row (search / wishlist / cart icons). */
    .nav_right_item {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .right_icon {
        position: relative;
        width: 24px;
        height: 24px;
    }
}

/* templates/css/style/components/_navbar.pcss
   Desktop primary navbar + dropdown menu cluster. Used by navbar.twig.

   IMPORTANT — this is the highest-blast-radius surface in the CSS
   sweep (every page renders the navbar). Migrate cautiously and
   verify each batch visually.

   A7a scope (this batch):
   - `nav` element base
   - `.nav_primary` outer + responsive
   - `.cl-page-width`, `.wrapper`, `.search-wrapper`     layout wrappers
   - `.blog-nav-primary-content` / `.blog-nav-menu-*`    navbar inner
   - `.toggle__menu` / `.clost_menu`                     toggle anchors
   - `.nav__list` / `.nav__item`                         primary menu
   - `.nav__link` + hover                                primary links
   - `.nav__link .dropdown__icon` + hover                arrow indicator
   - `.dropdown-menu` + descendants                      dropdown panel
   - `.megamenu__link.is-catelog:hover .megamenu_catelog` width transition

   A7b–A7d (later batches) own the rest:
   - megamenu / submenu / dropdown / .header__megamenu
   - mobile-nav-menu-overlay + mobile menu rules
   - .navLogo, .nav-button, .dropdown-select stragglers
*/

/* ---------- Base nav ---------- */

nav {
    padding: 0;
    position: relative;
    z-index: 25;
}

.nav_primary {
    border-bottom: none;
    padding: 0;
    align-items: center;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}

@media (min-width: 1200px) {
    .nav_primary {
        border-bottom: none;
        padding: 0;
    }
}

/* ---------- Layout wrappers ---------- */

.cl-page-width {
    margin: 0 auto;
    width: 100%;
}

.wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    height: var(--nav-height);
    width: 100%;
}

.search-wrapper {
    background-color: var(--color-brand);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    height: var(--nav-height);
    width: 100%;
}

/* ---------- Blog-nav variants (legacy naming for the news section) ---------- */

.blog-nav-primary-content {
    position: relative;
    align-items: center;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    max-width: var(--content-max-width);
    height: 100%;
}

.blog-nav-menu-content {
    height: 100%;
}

/* Note: `--cl-color-container-01` is not defined anywhere; the var()
   has no fallback, so it resolves to the initial value (transparent
   for background-color). Effectively a no-op. Preserved verbatim. */

.blog-nav-menu {
    background-color: var(--cl-color-container-01);
    bottom: 0;
    position: relative;
    right: 0;
    height: 74.89px;
    z-index: 99;
}

.blog-nav-menu-cat {
    background-color: var(--cl-color-container-01);
    bottom: 0;
    position: relative;
    right: 0;
    height: 74.89px;
    z-index: 99;
    width: 100%;
}

/* ---------- Megamenu width transition hook ---------- */

/* Belongs to the megamenu cluster (A7b owns the actual width rules)
   but kept here because it's a small CSS hint, not a full rule. */

.megamenu__link.is-catelog:hover .megamenu_catelog,
.megamenu__link.is-catelog:focus .megamenu_catelog {
    transition: width 0.3s ease-in-out;
}

/* ---------- Toggle anchors (hidden by default) ---------- */

.toggle__menu,
.clost_menu {
    display: none;
}

/* ---------- Primary nav list + items ---------- */

.nav__list {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 40px;
    flex-shrink: 0;
    justify-content: center;
    transition: all 0.5s ease;
}

.nav__item {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav__link {
    height: 100%;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-on-brand);
    font-family: Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.8px;
}

.nav__item:hover .nav__link {
    color: var(--color-accent);
    font-family: Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.8px;
}

.nav__link .dropdown__icon {
    stroke: white;
}

.nav__item:hover .dropdown__icon {
    stroke: var(--color-accent);
    transform: rotate(180deg);
    transition: all 0.3s ease-in-out;
}

/* ---------- @max-width:1200px responsive ---------- */

@media (max-width: 1200px) {
    .blog-nav-primary-content {
        min-width: unset;
    }
    .nav__list {
        display: none;
    }
    .mobile-menu-toggle {
        display: block;
    }
    .nav_right_item {
        display: none;
    }
}

/* ---------- Dropdown menu ---------- */

/* Hidden by default; JS toggles `.dropdown-active` on hover (see
   templates/js/megamenu.js). The two .dropdown-menu blocks from
   the old style.css are merged here — keeping them split caused
   a cascade flip with .dropdown-active once .dropdown-menu moved
   from style.css to app.css. */

.dropdown-menu {
    position: absolute;
    background-color: var(--color-brand);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    top: var(--nav-height);
    transform: translateX(-18%);
    min-width: 20px;
}

.dropdown-active {
    visibility: visible;
    opacity: 1;
    height: 100%;
    overflow: auto;
}

.submenu-active span {
    color: var(--color-accent) !important;
}

.submenu-active .menu__icon .na {
    stroke: var(--color-accent) !important;
}

.dropdown-menu ul {
    list-style: none;
    padding: 30px 20px 30px 10px;
    margin: 0;
}

.dropdown-menu li:first-child a {
    font-weight: 700;
    font-size: 20px;
    line-height: 23px;
    justify-content: space-between;
    color: var(--color-on-brand);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    cursor: pointer;
}

/* Note: `#84cc16` (slightly different lime than the brand accent
   `#a6ce39`) is preserved verbatim here — same shade as the newsletter
   popup's `.custom-subscribe-button`. Designer call needed to unify. */

.dropdown-menu li:first-child a:hover {
    color: #84cc16;
}

.dropdown-menu li:first-child a:hover path:nth-child(1) {
    fill: var(--color-accent);
}

.dropdown-menu li:first-child a:hover path:nth-child(2) {
    stroke: #84cc16;
}

.dropdown-menu li:not(:first-child) {
    padding-top: 30px;
}

.dropdown-menu li:not(:first-child) a:hover {
    color: #84cc16;
}

li.no-category:nth-child(2) {
    padding-top: 0;
}

.dropdown-menu li a {
    text-decoration: none;
    color: var(--color-on-brand);
    font-size: 1.125em;
    line-height: 1.294rem;
    letter-spacing: 0.05rem;
    font-weight: 400;
    cursor: pointer;
}

/* ============================================================
   A7b: Megamenu cluster
   ============================================================
   The desktop megamenu shown when hovering a primary nav item.
   Markup is in navbar.twig — all classes below are navbar-only
   (verified — no usage outside navbar.twig).
*/

/* ---------- Megamenu hover trigger + outer containers ---------- */

/* `.dropdown:hover .megamenu` is preserved as an empty rule — the
   original had only commented-out declarations. Kept to retain the
   structural marker for future hover work. */

.dropdown:hover .megamenu {
    /* visibility: visible; opacity: 1; (commented out in legacy) */
}

.blog-nav-primary-menu-section {
    position: relative;
}

.catelog_megamenu,
.megamenu_submenu {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.catelog_megamenu.active,
.megamenu_submenu-active {
    opacity: 1;
}

.megamenu,
.catelog_megamenu {
    opacity: 0;
    position: fixed;
    width: 291px;
    left: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 100px;
    box-shadow: 0 30px 50px 0 rgba(0, 0, 0, 0.25);
    visibility: hidden;
    z-index: 40;
    top: 75px;
    height: 100%;
}

.catelog_megamenu {
    left: 0;
    width: 100dvw;
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
}

.submenu {
    display: flex;
    padding-right: 10px;
    width: 100%;
    max-height: 90vh;
    height: 100%;
    overflow: auto;
    background: var(--color-brand);
    padding-left: 10px;
    border-right: 3px solid var(--color-accent);
    border-bottom: 3px solid var(--color-accent);
    border-left: 3px solid var(--color-accent);
    flex-direction: column;
    margin-left: -3px;
    z-index: 200;
}

.submenu-dropdown {
    display: flex;
    padding-right: 10px;
    max-height: 90vh;
    height: 100%;
    width: -moz-max-content;
    width: max-content;
    overflow: auto;
    background: var(--color-brand);
    padding-left: 1px;
    border-right: 3px solid var(--color-accent);
    border-bottom: 3px solid var(--color-accent);
    border-left: 3px solid var(--color-accent) !important;
    flex-direction: column;
}

.submenu-container {
    display: grid;
    grid-auto-flow: column;
    background: var(--color-brand);
    border-bottom: 3px solid var(--color-accent);
    border-right: 3px solid var(--color-accent);
    max-height: 90vh;
    margin-left: -3px;
    z-index: 100;
}

.submenu-container-parent {
    display: grid;
    grid-auto-flow: column;
    background: var(--color-brand);
    max-height: 90vh;
}

.submenu-content .content-container {
    margin: 0 2rem;
}

/* ---------- Megamenu sticky-grid containers ---------- */

.megamenu_submenu-active-b {
    display: flex;
    width: 100%;
    max-width: var(--content-max-width);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.megamenu_submenu-active {
    display: grid;
    grid-template-columns: 26% max-content max-content;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    max-width: 1400px;
    height: 100%;
}

.megamenu_submenu-active.has-content {
    grid-template-columns: 26% 30% max-content;
}

.mega__border {
    margin: 0 100px;
    border: 1px solid var(--color-accent);
}

.catelog_megamenu_b {
    position: absolute;
    overflow: hidden;
    background: var(--color-brand);
    box-shadow: 0 30px 50px 0 rgba(0, 0, 0, 0.25);
    width: 100%;
    max-height: 800px;
}

/* ---------- Logo inside header ---------- */

.logo img {
    width: 100px;
    flex-shrink: 0;
}

/* ---------- Megamenu inner content layout ---------- */

.content-wrapper {
    display: flex;
    padding-right: 10px;
    width: 100%;
    max-height: 90vh;
    height: 100%;
    overflow: auto;
    background: var(--color-brand);
    padding-left: 10px;
    border-left: 3px solid var(--color-accent);
    border-bottom: 3px solid var(--color-accent);
    border-right: 0 solid var(--color-accent);
    z-index: 10;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.content-container {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 3%;
    padding-top: 30px;
}

.collapsing {
    transition: none;
    display: none;
}

.submenu-content {
    max-height: 70dvh;
    height: 100%;
    overflow: auto;
}

.submenu-content-right {
    border-right: 1px solid var(--color-accent);
}

.submenu-max-height {
    width: 270px;
    max-height: 90dvh;
    overflow-y: auto;
}

.content-b {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 10px;
    box-sizing: border-box;
    width: -moz-fit-content;
    width: fit-content;
}

.content-container .content-b {
    padding: unset;
}

.content-expand {
    max-height: 70vh;
}

.no-border {
    border: none;
    padding: 0 6.25rem 0 0;
}

/* ---------- Megamenu items (.megamenu__item_*) ---------- */

.megamenu__item_header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.megamenu__item_header a:hover,
.megamenu__item_header a:hover span,
.megamenu__item_header span:hover svg {
    color: var(--color-accent);
}

.megamenu__item_header span:hover svg path:nth-child(1) {
    fill: var(--color-accent);
}

.megamenu__item_header span:hover svg path:nth-child(2) {
    stroke: var(--color-accent);
}

.megamenu__item {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
}

.megamenu-item-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 30px;
}

.m-nav-menu .megamenu-item-sub {
    margin-bottom: 0;
}

/* ---------- .header__megamenu ---------- */

.header__megamenu {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.header__megamenu .megamenu__link a span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-on-brand);
    font-family: Helvetica;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
    gap: 10px;
}

/* ---------- .megamenu__link ---------- */

a.megamenu__link {
    width: 100%;
}

.megamenu__link a {
    padding: 15px 0;
}

.megamenu__link a:hover span {
    color: var(--color-accent);
}

.megamenu__link a:hover .menu__icon .arrow path:nth-child(1) {
    fill: var(--color-accent);
}

.megamenu__link a:hover .menu__icon .arrow path:nth-child(2) {
    stroke: var(--color-accent);
}

/* ---------- .menu__icon (default white, hovered green) ---------- */

.menu__icon .arrow path:nth-child(1) {
    fill: var(--color-on-brand);
}

.menu__icon .arrow path:nth-child(2) {
    stroke: var(--color-on-brand);
}

.menu__icon .na {
    stroke: var(--color-on-brand);
}

/* ---------- .megamenu__item hover effects ---------- */

.megamenu__item .megamenu__link a:hover .arrow path:nth-child(1) {
    fill: var(--color-accent);
}

.megamenu__item .megamenu__link a:hover .arrow path:nth-child(2) {
    stroke: var(--color-accent);
}

.megamenu__item .megamenu__link a:focus,
.megamenu__item .megamenu__link a:hover {
    color: var(--color-accent);
}

.megamenu__item .megamenu__link a:hover .menu__icon .na {
    stroke: var(--color-accent);
}

/* Note: the second selector `megamenu__link a:active span` is missing
   a leading dot in the legacy CSS — preserved verbatim (effectively
   matches a `<megamenu__link>` element, i.e. dead). */

.megamenu__item .megamenu__link a:hover span,
megamenu__link a:active span {
    color: var(--color-accent);
}

.megamenu__item .megamenu__link .is-catelog a:hover .megamenu_catelog {
    visibility: visible;
    opacity: 1;
}

.megamenu_catelog {
    visibility: hidden;
    opacity: 0;
}

.megamenu__item .megamenu__link a,
.megamenu__item .megamenu__link a span,
.megamenu-item-sub a span {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    color: var(--color-on-brand);
    font-family: Helvetica;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.8px;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
}

/* ---------- Dropdown toggle .is-open (JS-toggled by megamenu.js) ---------- */

.dropdown.is-open > .nav__link {
    color: var(--color-accent);
}

.dropdown.is-open > .nav__link .dropdown__icon {
    stroke: var(--color-accent);
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* ---------- Megamenu responsive overrides ---------- */

/* These MUST live in the same file as the base megamenu rules
   above (and AFTER them) — moving them to style.css would let
   the base rules in app.css override the responsive ones at
   equal specificity, breaking mobile/tablet layout. */

@media (min-width: 1024px) {
    .megamenu__item {
        margin-bottom: 1px;
    }
    .header__megamenu {
        margin-top: 30px;
        margin-bottom: 10px;
    }
}

@media (max-width: 1600px) {
    .submenu {
        display: flex;
        padding-right: 10px;
        width: 100%;
        max-height: 90vh;
        height: 100%;
        overflow: auto;
        background: var(--color-brand);
        padding-left: 10px;
        border-right: 3px solid var(--color-accent);
        border-bottom: 3px solid var(--color-accent);
        border-left: 3px solid var(--color-accent);
        flex-direction: column;
        margin-left: -3px;
        z-index: 200;
    }

    .megamenu_submenu-active {
        grid-template-columns: 26% max-content max-content;
    }

    .submenu-max-height {
        width: 270px;
        max-height: 90dvh;
        overflow-y: auto;
    }

    .submenu-content .content-container {
        margin: 0 2rem;
    }

    .content-b {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 10px;
        box-sizing: border-box;
        width: -moz-fit-content;
        width: fit-content;
    }

    .content-wrapper {
        display: flex;
        padding-right: 10px;
        padding-left: 10px;
        height: 100%;
        max-height: 90vh;
        width: 100%;
        border-left: 3px solid var(--color-accent);
        border-bottom: 3px solid var(--color-accent);
        border-right: 0 solid var(--color-accent);
        background: var(--color-brand);
        overflow: auto;
        z-index: 10;
    }
}

/* ============================================================
   A7c: Mobile nav overlay
   ============================================================
   The slide-in overlay shown when the hamburger is tapped on
   viewports <=1200px. All classes below are navbar-only
   (verified — no usage outside navbar.twig).
*/

/* ---------- Mobile overlay base ---------- */

.mobile-nav-menu-overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: var(--nav-height);
    background: var(--color-brand);
    overflow-x: hidden;
    transition: 0.5s;
}

.hide-search {
    display: none !important;
}

/* ---------- Mobile nav rules (<=1200px) ---------- */

/* Separate @media block from the A7a primary-nav block above.
   .nav_right_item is intentionally NOT repeated — A7a already
   sets it `display: none` for this breakpoint. */

@media (max-width: 1200px) {
    .show-search {
        display: flex !important;
    }

    .mobile-nav-right-item {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .m-right-icon {
        width: 24px;
        height: 24px;
    }

    .mobile-nav-menu-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .mobile-nav-menu-content {
        position: relative;
        width: 100%;
    }

    .m-nav-menu {
        margin: 10px;
        text-decoration: none;
        display: block;
        transition: 0.3s;
    }

    .m-nav-menu button {
        padding-bottom: 40px;
    }

    .m-nav-menu li a {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding-bottom: 20px;
        font-size: 1.25rem;
        line-height: 1.438rem;
    }

    .m-nav-menu li a span,
    .mobile-nav-menu-bottem ul li a span {
        text-decoration: none;
        color: var(--color-on-brand);
    }

    /* Note: this is a GLOBAL `button` element reset scoped to the
       mobile breakpoint — preserved verbatim from legacy. Affects
       every <button> on the page below 1200px, not just navbar. */
    button {
        background: none;
        color: inherit;
        border: none;
        cursor: pointer;
        outline: inherit;
    }

    .mobile-nav-menu-overlay .clostbtn {
        position: absolute;
        text-decoration: none;
    }

    .mobile-nav-menu-bottem {
        position: relative;
        width: 100%;
    }

    .mobile-nav-menu-bottem .icon {
        justify-content: space-between;
        display: flex;
    }

    .mobile-nav-menu-bottem ul {
        margin: 40px;
    }

    .mobile-nav-menu-bottem ul li {
        padding-top: 43px;
    }
}

/* ---------- Hide mobile overlay on desktop (>=1201px) ---------- */

@media (min-width: 1201px) {
    .mobile-nav-menu-overlay {
        display: none;
    }
}

/* ---------- Mobile-nav megamenu-link refinements ---------- */

/* Scoped to .m-nav-menu — only applies inside the mobile overlay. */

.m-nav-menu .megamenu__item .megamenu__link a span {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
}

.m-nav-menu .megamenu__link .megamenu__item_header a span {
    font-weight: 500;
}

/* ============================================================
   A7d: Navbar stragglers
   ============================================================
   <header> wrapper, site search bar (.search-container + inputs),
   and .navLogo. All navbar-only (verified — no usage outside
   navbar.twig and _components/navLogo.twig).
*/

/* ---------- Fixed header bar ---------- */

header {
    position: fixed;
    max-height: 4.681rem;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 5px solid var(--color-accent);
    background: var(--color-brand);
    z-index: 100;
    justify-content: center;
    align-items: center;
}

/* ---------- Site search bar ---------- */

.search-container {
    display: flex;
    max-width: var(--content-max-width);
    width: 100%;
    left: 0;
    align-items: center;
    background-color: var(--color-brand);
    gap: 10px;
}

.show-search {
    display: flex !important;
    transition: 0.5s;
    transform: translateY(0);
}

.search-input {
    flex-grow: 1;
    border: none;
    padding: 8px 15px;
}

.search-input::-moz-placeholder {
    color: var(--color-muted);
}

.search-input::placeholder {
    color: var(--color-muted);
}

.search-input:focus,
.search-button:focus {
    outline: none;
}

/* ---------- Navbar logo image ---------- */

.navLogo {
    background-position-y: center;
    background-position-x: left;
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 200px;
    max-height: 50px;
    min-height: 50px;
}

/* templates/css/style/components/_newsletter_popup.pcss
   Newsletter popup + exit-intent popup. Used by:
   - _newsletterPop.twig
   - _exitPop.twig

   Markup pattern:
     <div class="custom-overlay" id="newsletter-popup-overlay">
       <div class="custom-popup-container" id="newsletter-popup">
         <div class="content-split custom-image-container">
           <img class="custom-background-image background">
         </div>
         <div class="content-split custom-form-container">
           <div class="pop-up-close"><button>×</button></div>
           <h2 class="custom-title">...</h2>
           <p class="custom-description">...</p>
           <form class="custom-form">
             <input class="custom-input-email">
             <a class="signup-button btn btn--primary">SIGN UP</a>
             <button class="custom-close-button">I'll sign up later</button>
           </form>
         </div>
       </div>
*/

/* ---------- #newsletter-popup container ---------- */

#newsletter-popup .content-split {
        padding-bottom: 0;
    }

#newsletter-popup > div {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* The right column (form side) — picks up the .content-split base
   layout from _content_split.pcss but with overridden padding. */

#newsletter-popup .content-split:nth-child(2) {
    padding: 20px;
}

/* Background image inside the image column. Note: legacy file had a
   typo'd `backgroun-color` declaration — fixed here. */

#newsletter-popup .background {
    background-color: var(--color-brand);
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

#newsletter-popup .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 298px;
    height: 129px;
    transform: translate(-50%, -50%);
    -o-object-fit: contain;
       object-fit: contain;
}

/* ---------- Popup overlay + container ---------- */

.custom-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 101;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
}

.image-container,
.custom-image-container {
    position: relative;
}

.custom-background-image,
.custom-logo-image {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.custom-logo-image {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ---------- Form container ---------- */

.custom-form-container {
    position: relative;
    padding: 3.321428em;
    background-color: #f0f0f0;
}

.custom-form-container-exit {
    padding: 30px;
    background-color: #f0f0f0;
}

.custom-title {
    text-align: center;
    font-size: 1.5625em;
    font-weight: bold;
    margin-bottom: 10px;
}

.custom-description {
    text-align: center;
    font-size: 1.1428em;
    line-height: 22px;
    font-weight: 400;
    margin-bottom: 25px;
    color: var(--color-muted);
}

.custom-form {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Submit anchor inside the newsletter popup form. Layout-only —
   colour / font / padding all come from `.btn .btn--primary`. */

#signup-button-pop {
    flex: 0 0 10%;
    width: 100%;
    align-self: center;
    font-size: 0.785rem;
    display: flex;
}

.custom-input-email {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.1px;
    border: 2px solid #e2e2e2;
    padding: 15px;
    width: 100%;
    margin-bottom: 25px;
}

/* Note: bg `#84cc16` is a different shade of lime than the brand
   accent (`#a6ce39`). Preserved verbatim — designer call needed to
   either unify or keep the popup-specific shade. */

.custom-subscribe-button {
    background-color: #84cc16;
    color: var(--color-brand);
    padding: 15px;
    font-size: 14px;
    width: 100%;
    margin-bottom: 25px;
    cursor: pointer;
    text-align: center;
}

.custom-close-button {
    color: var(--color-muted);
    font-size: 16px;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
}

/* Close (×) button in the top-right corner of the form column. */

.pop-up-close {
    top: 19px;
    right: 30px;
    position: absolute;
}

/* ---------- Exit-intent popup variants ---------- */

.custom-description-pop {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    color: var(--color-muted);
}

.pop-green-heading {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    color: var(--color-accent);
}

.pop-dot-points {
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: var(--color-muted);
}

.pop-exit-header {
    display: flex;
    flex-direction: column;
    margin-top: 56px;
    margin-bottom: 30px;
}

.custom-form-container-exit .custom-textbox {
    margin-bottom: 30px;
}

.custom-form-container-exit .custom-subscribe-button {
    margin-bottom: 30px;
}

.custom-form-container-exit .custom-close-button {
    text-decoration: underline;
}

/* templates/css/style/styleguide-page.pcss
   Styleguide-only chrome and fixture supplementals. All `.sg-*` classes
   used by templates/styleguide/index.twig and templates/styleguide/_fixtures/
   live here. Compiled into web/css/styles.css by `npm run build:styles`.

   Conventions:
   - Tokens via var(--name); never hardcode brand hex values.
   - Tailwind utilities via @apply where they shorten the rule.
   - No inline style="..." in any styleguide twig — add a class here. */

/* ============================================================== *
   1. Layout shell + header
 * ============================================================== */

.sg-shell {
    --sg-nav-width: 240px;
    --sg-gap: 2rem;
    display: grid;
    grid-template-columns: var(--sg-nav-width) 1fr;
    gap: var(--sg-gap);
    max-width: var(--large-content-max-width);
    margin: 0 auto;
    padding: 2rem 1.5rem 6rem;
}

.sg-page-header { margin-bottom: 2rem; }

.sg-page-header__title {
    font-size: var(--fs-display);
    font-weight: 700;
    color: var(--color-brand);
    margin: 0 0 0.5rem;
}

.sg-page-header__lead {
    color: var(--color-muted);
    margin: 0;
}

@media (max-width: 900px) {
    .sg-shell { grid-template-columns: 1fr; }
    .sg-nav {
        position: static;
        max-height: none;
        border-bottom: 1px solid var(--color-hairline);
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
}

/* ============================================================== *
   2. Sticky sub-nav
 * ============================================================== */

.sg-nav {
    position: sticky;
    top: calc(var(--nav-height) + 1rem);
    align-self: start;
    max-height: calc(100vh - var(--nav-height) - 2rem);
    overflow-y: auto;
    padding-right: 0.5rem;
    font-size: var(--fs-small);
}

.sg-nav h4 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin: 1.25rem 0 0.5rem;
}

.sg-nav h4:first-child { margin-top: 0; }

.sg-nav ul {
  margin: 0px;
  list-style-type: none;
  padding: 0px;
}

.sg-nav li { margin: 0.15rem 0; }

.sg-nav a {
  display: block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: var(--color-brand);
    text-decoration: none;
}

.sg-nav a:hover {
    background: var(--color-surface-alt);
    color: var(--color-brand);
}

/* ============================================================== *
   3. Main + sections
 * ============================================================== */

.sg-main { min-width: 0; }

.sg-section {
    scroll-margin-top: calc(var(--nav-height) + 1rem);
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--color-hairline);
}

.sg-section > h2 {
    font-size: var(--fs-display);
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--color-brand);
}

.sg-section > .sg-lead {
    color: var(--color-muted);
    margin-bottom: 1.5rem;
}

.sg-subsection { margin-top: 2rem; }

.sg-subsection > h3 {
    font-size: var(--fs-lead);
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--color-brand);
}

.sg-preview {
    background: var(--color-surface);
    border: 1px solid var(--color-hairline);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.sg-preview--flush { padding: 0; }

.sg-preview--soft { background: var(--color-surface-alt); }

.sg-preview--dark {
    background: var(--color-brand);
    color: var(--color-on-brand);
}

.sg-preview--tight { padding: 0.5rem 1.5rem; }

.sg-meta {
  display: flex;
  flex-wrap: wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.sg-help {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: 0.5rem;
}

/* ============================================================== *
   4. State-reference table (used in Buttons section)
 * ============================================================== */

.sg-table {
  width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
}

.sg-table thead th {
    text-align: left;
    border-bottom: 1px solid var(--color-hairline);
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    color: var(--color-brand);
}

.sg-table tbody td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--color-hairline);
}

.sg-table tbody tr:last-child td { border-bottom: none; }

.sg-table .sg-table__hint { color: var(--color-muted); }

/* ============================================================== *
   5. Color swatches
 * ============================================================== */

.sg-swatch-grid {
  display: grid;
}

.content-container-1 .sg-swatch-grid {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.content-container-1 .sg-swatch-grid.home {
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 960px) {
    .content-container-1 .sg-swatch-grid {
        flex-wrap: wrap;
        gap: 10px;
    }
    .content-container-1 .sg-swatch-grid.home {
        flex-wrap: wrap;
    }
}

.sg-swatch-grid.home {
  margin-top: 2.5rem;
}

@media (min-width: 768px) {

  .sg-swatch-grid.home {
    margin-top: 0px;
  }
}

.sg-swatch-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.sg-swatch {
    border: 1px solid var(--color-hairline);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface);
}

.sg-swatch--wide { max-width: 420px; }

.sg-swatch-chip {
    height: 96px;
    border-bottom: 1px solid var(--color-hairline);
}

.sg-swatch-chip--gradient { background: var(--gradient-brand); }

.sg-swatch-meta {
    padding: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.4;
}

.sg-swatch-label {
    font-family: Helvetica, Arial, sans-serif;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--color-brand);
    margin-bottom: 0.25rem;
}

.sg-swatch-var {
  display: block;
    color: var(--color-brand);
    word-break: break-all;
}

.sg-swatch-hex {
  display: block;
    color: var(--color-muted);
}

.sg-swatch-aliases {
  display: block;
    color: var(--color-muted);
    font-size: 0.7rem;
    margin-top: 0.3rem;
}

.sg-swatch-note {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.1rem 0.4rem;
    background: #fff5d6;
    color: #8a6d00;
    border-radius: 3px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================================== *
   6. Typography rows (applied roles)
 * ============================================================== */

.sg-type-row {
  display: grid;
  align-items: baseline;
}

.content-container-1 .sg-type-row {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.content-container-1 .sg-type-row.home {
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 960px) {
    .content-container-1 .sg-type-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    .content-container-1 .sg-type-row.home {
        flex-wrap: wrap;
    }
}

.sg-type-row.home {
  margin-top: 2.5rem;
}

@media (min-width: 768px) {

  .sg-type-row.home {
    margin-top: 0px;
  }
}

.sg-type-row {
    grid-template-columns: 220px 1fr 100px;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-hairline);
}

.sg-type-row:last-child { border-bottom: none; }

.sg-type-meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.4;
}

.sg-type-meta strong {
  display: block;
    color: var(--color-brand);
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.sg-type-px {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-muted);
    text-align: right;
}

/* Sample modifiers replicate the production applied combos */

.sg-type-sample {
    color: var(--color-brand);
    font-family: Helvetica, Arial, sans-serif;
}

.sg-type-sample--white { color: var(--color-on-brand); }

.sg-type-sample--grey { color: var(--color-muted); }

.sg-type-sample--capitalize { text-transform: capitalize; }

.sg-type-sample--card-title {
    /* Resource card title: 20px / 25px / 0.4px tracking */
    font-size: var(--fs-lead);
    line-height: var(--fh-25);
    letter-spacing: 0.4px;
    font-weight: 700;
}

.sg-type-sample--banner-h {
    /* Banner heading: 30px / 36px white */
    font-size: var(--fs-h2);
    line-height: var(--fh-36);
    color: var(--color-on-brand);
    font-weight: 700;
}

.sg-type-sample--banner-sub {
    /* Banner subheading: 20px / 30px white */
    font-size: var(--fs-lead);
    line-height: var(--fh-30);
    color: var(--color-on-brand);
    font-weight: 400;
}

.sg-type-sample--product-h1 {
    /* Product detail title: 40px / 46px capitalize */
    font-size: var(--fs-display);
    line-height: var(--fh-46);
    color: var(--color-brand);
    text-transform: capitalize;
    font-weight: 700;
}

.sg-type-sample--section-h {
    /* Section heading: 30px / 36px */
    font-size: var(--fs-h2);
    line-height: var(--fh-36);
    color: var(--color-brand);
    font-weight: 700;
}

.sg-type-sample--slider-sub {
    /* Slider subheading: 20px / 30px grey */
    font-size: var(--fs-lead);
    line-height: var(--fh-30);
    color: var(--color-muted);
    font-weight: 400;
}

.sg-type-sample--body {
    font-size: var(--fs-body);
    line-height: var(--fh-22);
    color: var(--color-brand);
}

.sg-type-sample--card-sub {
    /* Card subheading: 16px / 18.4px grey */
    font-size: var(--fs-body);
    line-height: var(--fh-18);
    color: var(--color-muted);
}

.sg-type-sample--filter-h {
    /* Filter row header: 14px / 35px */
    font-size: var(--fs-small);
    line-height: 35px;
    color: #333;
    font-weight: 400;
}

.sg-lh-bar {
    position: relative;
    background: linear-gradient(
        to bottom,
        transparent calc(50% - 0.5px),
        rgba(166, 206, 57, 0.4) calc(50% - 0.5px),
        rgba(166, 206, 57, 0.4) calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}

.sg-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
    gap: 1.5rem;
}

.sg-link-row a { color: var(--color-link); }

/* ============================================================== *
   7. Spacing / layout demo
 * ============================================================== */

.sg-ruler {
    position: relative;
    height: 32px;
    background: repeating-linear-gradient(
        to right,
        var(--color-hairline) 0 1px,
        transparent 1px 50px
    );
    border: 1px solid var(--color-hairline);
    border-radius: 4px;
    margin: 0.5rem 0 0.25rem;
}

.sg-ruler-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: rgba(166, 206, 57, 0.35);
    border-right: 2px solid var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-brand);
}

.sg-token-row {
  display: grid;
  align-items: center;
}

.content-container-1 .sg-token-row {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.content-container-1 .sg-token-row.home {
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 960px) {
    .content-container-1 .sg-token-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    .content-container-1 .sg-token-row.home {
        flex-wrap: wrap;
    }
}

.sg-token-row.home {
  margin-top: 2.5rem;
}

@media (min-width: 768px) {

  .sg-token-row.home {
    margin-top: 0px;
  }
}

.sg-token-row {
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-hairline);
}

.sg-token-row:last-child { border-bottom: none; }

.sg-token-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

.sg-token-name strong {
  display: block;
    color: var(--color-brand);
    margin-bottom: 0.15rem;
}

.sg-token-name span { color: var(--color-muted); }

.sg-pad-demo {
    display: inline-block;
    padding: var(--width-padding-inline);
    background: rgba(166, 206, 57, 0.15);
    border: 1px dashed var(--color-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-brand);
}

.sg-nav-demo {
    height: var(--nav-height);
    background: var(--color-brand);
    color: var(--color-on-brand);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

/* Grid pattern demo (visualises the canonical grid shapes) */

.sg-grid-demo {
  display: grid;
}

.content-container-1 .sg-grid-demo {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.content-container-1 .sg-grid-demo.home {
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 960px) {
    .content-container-1 .sg-grid-demo {
        flex-wrap: wrap;
        gap: 10px;
    }
    .content-container-1 .sg-grid-demo.home {
        flex-wrap: wrap;
    }
}

.sg-grid-demo.home {
  margin-top: 2.5rem;
}

@media (min-width: 768px) {

  .sg-grid-demo.home {
    margin-top: 0px;
  }
}

.sg-grid-demo {
    border: 1px dashed var(--color-hairline);
    padding: 1rem;
    background: var(--color-surface-alt);
    margin-bottom: 0.5rem;
}

.sg-grid-demo--range {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 35px;
}

.sg-grid-demo--products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.sg-grid-demo--resources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.sg-grid-demo__cell {
    background: var(--color-brand);
    color: var(--color-on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

/* ============================================================== *
   8. Breakpoints reference
 * ============================================================== */

.sg-bp-list {
  display: grid;
}

.content-container-1 .sg-bp-list {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.content-container-1 .sg-bp-list.home {
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 960px) {
    .content-container-1 .sg-bp-list {
        flex-wrap: wrap;
        gap: 10px;
    }
    .content-container-1 .sg-bp-list.home {
        flex-wrap: wrap;
    }
}

.sg-bp-list.home {
  margin-top: 2.5rem;
}

@media (min-width: 768px) {

  .sg-bp-list.home {
    margin-top: 0px;
  }
}

.sg-bp-list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.sg-bp {
    border: 1px solid var(--color-hairline);
    border-radius: 6px;
    padding: 0.85rem;
    background: var(--color-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    transition: border-color 0.2s, background 0.2s;
}

.sg-bp.is-active {
    border-color: var(--color-accent);
    background: rgba(166, 206, 57, 0.12);
    box-shadow: 0 0 0 2px rgba(166, 206, 57, 0.25);
}

.sg-bp-name {
  display: block;
    font-weight: 700;
    color: var(--color-brand);
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.sg-bp-px { color: var(--color-muted); }

.sg-bp-current {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: var(--color-brand);
    color: var(--color-on-brand);
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

.sg-bp-current + .sg-bp-current { margin-left: 0.5rem; }

.sg-bp-current strong {
    color: var(--color-accent);
    margin-left: 0.4rem;
}

.sg-bp-active-row { margin-bottom: 1rem; }

/* ============================================================== *
   9. Buttons section
 * ============================================================== */

.sg-btn-grid {
  display: grid;
}

.content-container-1 .sg-btn-grid {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.content-container-1 .sg-btn-grid.home {
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 960px) {
    .content-container-1 .sg-btn-grid {
        flex-wrap: wrap;
        gap: 10px;
    }
    .content-container-1 .sg-btn-grid.home {
        flex-wrap: wrap;
    }
}

.sg-btn-grid.home {
  margin-top: 2.5rem;
}

@media (min-width: 768px) {

  .sg-btn-grid.home {
    margin-top: 0px;
  }
}

.sg-btn-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.sg-btn-cell {
    border: 1px solid var(--color-hairline);
    border-radius: 8px;
    padding: 1.25rem;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sg-btn-cell--dark {
    background: var(--color-brand);
    color: var(--color-on-brand);
}

.sg-btn-cell--dark .sg-btn-class,
.sg-btn-cell--dark .sg-btn-desc { color: var(--color-hairline); }

.sg-btn-class {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    color: var(--color-muted);
    word-break: break-all;
}

.sg-btn-desc {
    font-size: 0.8rem;
    color: var(--color-muted);
}

/* The Buttons section uses the production .btn primitive directly
   (defined in templates/css/style/buttons.pcss). The styleguide page
   eats its own dog food — no separate .sg-demo-btn classes. */

/* Pagination demo — only place in the system with rounded corners */

.sg-demo-pagination {
  display: inline-flex;
  align-items: center;
    gap: 0.5rem;
}

.sg-demo-pagination a {
    padding: 5px 10px;
    color: var(--color-brand);
    text-decoration: none;
    border-radius: 5px;
    font-size: var(--fs-lead);
    line-height: var(--fh-30);
}

.sg-demo-pagination a.active {
    background: var(--color-brand);
    color: var(--color-on-brand);
}

/* ============================================================== *
  10. Forms (production-fidelity)
 * ============================================================== */

.sg-form-grid {
  display: grid;
}

.content-container-1 .sg-form-grid {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.content-container-1 .sg-form-grid.home {
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 960px) {
    .content-container-1 .sg-form-grid {
        flex-wrap: wrap;
        gap: 10px;
    }
    .content-container-1 .sg-form-grid.home {
        flex-wrap: wrap;
    }
}

.sg-form-grid.home {
  margin-top: 2.5rem;
}

@media (min-width: 768px) {

  .sg-form-grid.home {
    margin-top: 0px;
  }
}

.sg-form-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.sg-form-cell {
  display: flex;
  flex-direction: column;
    gap: 0.4rem;
}

.sg-form-label {
    font-family: Helvetica, Arial, sans-serif;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--color-brand);
}

.sg-form-help { font-size: 0.75rem; color: var(--color-muted); }

.sg-form-error { font-size: 0.75rem; color: #b00020; }

/* Production input pattern: square, hairline border, helvetica */

.sg-input,
.sg-textarea,
.sg-select {
    width: 100%;
    height: 40px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-brand);
    font-family: Helvetica, Arial, sans-serif;
    font-size: var(--fs-small);
}

.sg-textarea {
    height: auto;
    min-height: 100px;
    resize: vertical;
}

.sg-input:focus,
.sg-textarea:focus,
.sg-select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(166, 206, 57, 0.25);
}

.sg-input.is-error { border-color: #b00020; }

.sg-check-row {
  display: flex;
  align-items: center;
    gap: 0.5rem;
}

.sg-file {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-alt);
    border: 1px dashed var(--color-hairline);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--color-muted);
    cursor: pointer;
}

/* ============================================================== *
  11. Generic fixture utilities
 * ============================================================== */

/* Placeholder slot for missing images / iframes / QR / map etc. */

.sg-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
    background: var(--color-surface-alt);
    color: var(--color-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    min-height: 100px;
}

.sg-placeholder--dark {
    background: var(--color-brand);
    color: var(--color-hairline);
}

.sg-placeholder--gradient {
    background: var(--gradient-brand);
    color: var(--color-hairline);
}

.sg-placeholder--circle { border-radius: 50%; }

.sg-placeholder--ratio-4-3 { aspect-ratio: 4 / 3; }

.sg-placeholder--ratio-3-4 { aspect-ratio: 3 / 4; }

.sg-placeholder--ratio-16-9 { aspect-ratio: 16 / 9; }

.sg-placeholder--ratio-1 { aspect-ratio: 1 / 1; }

/* Apply the brand hero gradient via the canonical token.
   Production currently hardcodes this inline in several hero templates;
   fixtures use this class to model the right pattern. */

.sg-bg-gradient { background: var(--gradient-brand); }

/* Centered slider title block (mimics .home-products-slider-wrapper layout) */

.sg-fixture-section-head {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Wraps a fixture in a soft-bg section with sensible padding */

.sg-fixture-pad { padding: 2rem 1.5rem; }

/* Round circular swiper-style nav button (used in slider fixtures).
   Production uses inline styles; centralised here. */

.sg-fixture-swiper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: all;
    border: none;
}

/* Slider pagination bar dots (used in top-hero) */

.sg-fixture-bullets {
  display: flex;
  align-items: center;
  justify-content: center;
    gap: 0.5rem;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.sg-fixture-bullet {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
}

.sg-fixture-bullet.is-active { background: var(--color-accent); }

/* Section descriptors (replaces .sg-todo when components are gated off) */

.sg-todo {
    font-size: var(--fs-small);
    color: var(--color-muted);
    font-style: italic;
    padding: 1rem;
    background: var(--color-surface-alt);
    border-radius: 6px;
}

/* ! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}

@media (min-width: 1921px) {

  .container {
    max-width: 1921px;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.right-3 {
  right: 0.75rem;
}

.top-3 {
  top: 0.75rem;
}

.isolate {
  isolation: isolate;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.m-0 {
  margin: 0px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-5 {
  margin-left: 1.25rem;
}

.ml-auto {
  margin-left: auto;
}

.mt-0 {
  margin-top: 0px;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-\[40px\] {
  margin-top: 40px;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-24 {
  height: 6rem;
}

.h-\[380px\] {
  height: 380px;
}

.min-h-\[110px\] {
  min-height: 110px;
}

.min-h-\[120px\] {
  min-height: 120px;
}

.min-h-\[240px\] {
  min-height: 240px;
}

.min-h-\[280px\] {
  min-height: 280px;
}

.min-h-\[320px\] {
  min-height: 320px;
}

.min-h-\[380px\] {
  min-height: 380px;
}

.min-h-\[420px\] {
  min-height: 420px;
}

.w-24 {
  width: 6rem;
}

.w-\[320px\] {
  width: 320px;
}

.w-full {
  width: 100%;
}

.min-w-\[220px\] {
  min-width: 220px;
}

.max-w-\[--content-max-width\] {
  max-width: var(--content-max-width);
}

.max-w-\[1100px\] {
  max-width: 1100px;
}

.max-w-\[375px\] {
  max-width: 375px;
}

.max-w-\[540px\] {
  max-width: 540px;
}

.max-w-\[720px\] {
  max-width: 720px;
}

.max-w-\[760px\] {
  max-width: 760px;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.basis-\[40\%\] {
  flex-basis: 40%;
}

.border-collapse {
  border-collapse: collapse;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize {
  resize: both;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-\[repeat\(2\2c auto\)\] {
  grid-template-columns: repeat(2,auto);
}

.grid-cols-\[repeat\(auto-fit\2c minmax\(280px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
}

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

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-end {
  align-items: flex-end;
}

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

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-36 {
  gap: 9rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-y-12 {
  row-gap: 3rem;
}

.divide-hairline > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-hairline);
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-solid {
  border-style: solid;
}

.border-\[\#7E8083\] {
  --tw-border-opacity: 1;
  border-color: rgb(126 128 131 / var(--tw-border-opacity));
}

.border-\[\#DDDDDD\] {
  --tw-border-opacity: 1;
  border-color: rgb(221 221 221 / var(--tw-border-opacity));
}

.border-\[color\:var\(--color-hairline\)\] {
  border-color: var(--color-hairline);
}

.border-brand {
  border-color: var(--color-brand);
}

.border-hairline {
  border-color: var(--color-hairline);
}

.bg-\[color\:var\(--color-accent\)\] {
  background-color: var(--color-accent);
}

.bg-\[color\:var\(--color-brand\)\] {
  background-color: var(--color-brand);
}

.bg-\[color\:var\(--color-surface\)\] {
  background-color: var(--color-surface);
}

.bg-accent {
  background-color: var(--color-accent);
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-brand {
  background-color: var(--color-brand);
}

.bg-surface {
  background-color: var(--color-surface);
}

.bg-surface-alt {
  background-color: var(--color-surface-alt);
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-gradient-brand {
  background-image: var(--gradient-brand);
}

.p-0 {
  padding: 0px;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-8 {
  padding: 2rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-\[10px\] {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-\[60px\] {
  padding-top: 60px;
  padding-bottom: 60px;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-\[30px\] {
  padding-top: 30px;
}

.pt-\[50px\] {
  padding-top: 50px;
}

.text-center {
  text-align: center;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-\[0\.7rem\] {
  font-size: 0.7rem;
}

.text-\[length\:var\(--fs-body\)\] {
  font-size: var(--fs-body);
}

.text-\[length\:var\(--fs-display\)\] {
  font-size: var(--fs-display);
}

.text-\[length\:var\(--fs-h2\)\] {
  font-size: var(--fs-h2);
}

.text-\[length\:var\(--fs-lead\)\] {
  font-size: var(--fs-lead);
}

.text-\[length\:var\(--fs-small\)\] {
  font-size: var(--fs-small);
}

.text-body {
  font-size: var(--fs-body);
}

.text-display {
  font-size: var(--fs-display);
}

.text-h2 {
  font-size: var(--fs-h2);
}

.text-h3 {
  font-size: var(--fs-h3);
}

.text-lead {
  font-size: var(--fs-lead);
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-small {
  font-size: var(--fs-small);
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-\[400\] {
  font-weight: 400;
}

.font-bold {
  font-weight: 700;
}

.font-normal {
  font-weight: 400;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.leading-9 {
  line-height: 2.25rem;
}

.leading-\[30px\] {
  line-height: 30px;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[\#7E8083\] {
  --tw-text-opacity: 1;
  color: rgb(126 128 131 / var(--tw-text-opacity));
}

.text-\[\#7e8083\] {
  --tw-text-opacity: 1;
  color: rgb(126 128 131 / var(--tw-text-opacity));
}

.text-\[color\:var\(--color-accent\)\] {
  color: var(--color-accent);
}

.text-\[color\:var\(--color-brand\)\] {
  color: var(--color-brand);
}

.text-\[color\:var\(--color-muted\)\] {
  color: var(--color-muted);
}

.text-\[color\:var\(--color-on-brand\)\] {
  color: var(--color-on-brand);
}

.text-\[var\(--fh-20\)\] {
  color: var(--fh-20);
}

.text-accent {
  color: var(--color-accent);
}

.text-brand {
  color: var(--color-brand);
}

.text-inherit {
  color: inherit;
}

.text-ink {
  color: var(--color-ink);
}

.text-link {
  color: var(--color-link);
}

.text-muted {
  color: var(--color-muted);
}

.text-on-brand {
  color: var(--color-on-brand);
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.underline {
  text-decoration-line: underline;
}

.no-underline {
  text-decoration-line: none;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-\[0\.85\] {
  opacity: 0.85;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.outline-2 {
  outline-width: 2px;
}

.outline-offset-2 {
  outline-offset: 2px;
}

.outline-\[color\:var\(--color-brand\)\] {
  outline-color: var(--color-brand);
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================
   @apply customisations (merged from old tailwindcss.pcss)
   ============================================================ */

.container-xl.news-slider-content,
.container-xl.slider-content,
.container-xl.product-range__container,
.container.slider-content__container {
  margin-bottom: 3.5rem;
}

.content-container-footer ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {

  .content-container-footer ul {
    gap: 2.25rem;
  }
}

.content-container-footer .heading {
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {

  .content-container-footer .heading {
    margin-bottom: 2.5rem;
  }
}

.breadcrumb-divider {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

@media (min-width: 768px) {

  .breadcrumb-divider {
    margin-left: 1.75rem;
    margin-right: 1.75rem;
  }
}

.megamenu__item {
  margin-bottom: 0px;
}

.header__megamenu {
  margin-bottom: 0px;
}

.mobile-nav-submenu-content .content-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {

  .mobile-nav-submenu-content .content-container {
    gap: 1rem;
  }
}

.mobile-nav-submenu-content .content-container .megamenu-item-sub {
  margin-bottom: 0px;
}

.mobile-nav-submenu-content .content-container .megamenu-item-sub a {
  padding-bottom: 1rem;
}

.testimonial-quote {
  position: relative;
  margin: 1rem;
  display: flex;
  gap: 2rem;
  padding: 1.25rem;
  text-align: left;
  font-weight: 400;
    gap: 8px;
}

@media (min-width: 768px) {

  .testimonial-quote {
    margin-top: 70px;
    margin-left: 60px;
    margin-right: 60px;
    margin-bottom: 60px;
    gap: 0px;
  }
}

.testimonial-quote {
  font-size: var(--fs-body);
}

.grid.home {
  margin-top: 2.5rem;
}

@media (min-width: 768px) {

  .grid.home {
    margin-top: 0px;
  }
}

.project-card-details-container {
  width: 100%;
}

@media (min-width: 768px) {

  .project-card-details-container {
    width: 263px;
  }
}

.project-card-details-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-card-details-container .detail {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.project-card-details-container .detail h1 {
  font-family: Helvetica;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.02em;
  text-align: left;
  color: #002205;
}

.project-card-details-container .detail .month {
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 400;
  line-height: 18.4px;
  text-align: left;
  color: #7e8083;
}

.project-card-details-container .detail-contact {
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: #a6ce39;
  text-decoration: underline;
}

.project-card-details-container .detail-contact-phone {
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: #002205;
  text-decoration: underline;
}

/* .content-split-wrap .content-container-1 nested rule moved to style/components/_content_split.pcss */

.app-download-wrapper {
  height: 100%;
}

@media (min-width: 768px) {

  .app-download-wrapper {
    height: 267px;
  }
}

.app-download-grid .qr-code {
    display: none;
}

@media (min-width: 768px) {

  .app-download-grid .qr-code {
    display: block;
  }
}

.resource-card-right, .featured-card {
  gap: 1rem;
}

@media (min-width: 768px) {

  .resource-card-right, .featured-card {
    gap: 0px;
  }
}

.resource-container .resource-card-image,
.product-resources__card img,
.resource-card-image {
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 768px) {

  .resource-container .resource-card-image,
.product-resources__card img,
.resource-card-image {
    -o-object-fit: cover;
       object-fit: cover;
  }
}

#newsletter-popup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  width: 100dvw;
  max-width: 1058px;
  margin: auto;
  background-color: white;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid white;
}

@media (min-width: 768px) {

  #hero {
    height: 100%;
  }
}

#hero .swiper-hero {
  height: 100%;
}

.swiper.swiper-hero {
  max-width: 100%;
}

@media screen and (max-width: 1020px) {
  .hero-img.hero-img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .content-split-wrap.content-split-wrap {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  @media (min-width: 768px) {

    .content-split-wrap.content-split-wrap {
      padding-top: 0px;
      padding-bottom: 0px;
    }
  }
}

/* .content-split-wrap @apply rule merged into style/components/_content_split.pcss */

.swiper-assets-card .left-content img {
  box-shadow: 4px 6px 8px 0px #00000033;
}

.slide-content .header {
  font-weight: 700;
}

/* ============================================================
   Element resets and globals (merged from old style/styles.pcss)
   ============================================================ */

h2 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--fh-36);
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 1 0%;
}

footer {
  margin-top: auto;
}

summary {
  display: flex;
}

.collapse { visibility: h; }

/* preserved verbatim — broken in source, dead since Bootstrap left */

.show {
  visibility: visible;
  opacity: 1;
}

#quote-list-page {
    display: none;
}

.faq-icon { transition: transform 0.3s ease; }

details[open] .faq-icon { transform: rotate(180deg); }

details[open] .faq-icon .vertical-line { display: none; }

.product-range-card-grid {
  max-width: var(--large-content-max-width);
}

/* .banner-wrapper.banner-wrapper rule moved to style/components/_hero.pcss */

@media (min-width: 640px) {

  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:w-fit {
    width: -moz-fit-content;
    width: fit-content;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {

  .md\:my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .md\:mb-\[60px\] {
    margin-bottom: 60px;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:gap-0 {
    gap: 0px;
  }

  .md\:gap-\[60px\] {
    gap: 60px;
  }

  .md\:gap-y-0 {
    row-gap: 0px;
  }

  .md\:p-5 {
    padding: 1.25rem;
  }

  .md\:px-\[20px\] {
    padding-left: 20px;
    padding-right: 20px;
  }

  .md\:py-\[60px\] {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (min-width: 1280px) {

  .xl\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .xl\:w-\[17\.96875\%\] {
    width: 17.96875%;
  }

  .xl\:w-\[28\.125\%\] {
    width: 28.125%;
  }

  .xl\:w-full {
    width: 100%;
  }

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:gap-16 {
    gap: 4rem;
  }
}