/* 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. */

/* web/css/richtext-spec.css

   CANONICAL rich-text typography spec — single source of truth.

   Consumed by THREE places, all of which load this file directly via
   URL or @import (no build-time copies, no sync scripts):

     1. Frontend bundle — `templates/css/app.pcss` @imports it; PostCSS
        inlines the contents into `web/css/app.css`. Any frontend
        markup wrapped in `<div class="ck-content">` picks up the spec.
     2. Shadow DOM in `templates/js/closed-richtext.js` — adds a
        <link rel="stylesheet" href="/css/richtext-spec.css"> inside
        the shadow root and wraps content in <div class="ck-content">.
     3. CKEditor admin pane — `config/ckeditor/Simple.css` is a
        one-line `@import url("/css/richtext-spec.css");` shim. Craft's
        CKEditor Field hoists @import statements out of its per-input
        wrapping (see Field.php inputHtml()), so the spec's
        `.ck-content` rules land at the top level and apply globally
        to every editor instance on the page.

   Pt units mirror the design spec (1pt ≈ 1.333px). Selectors are
   scoped to `.ck-content` so they only apply to wrapped rich-text
   content — other site headings keep their `_base.pcss` styles.

   Colours and the font family come from the project's design tokens
   (tokens.pcss). They're aliased to `--rt-*` custom properties on
   `.ck-content` (each `var(--token, fallback)`) rather than referenced
   inline, because the CKEditor pane and shadow DOM don't load
   tokens.pcss — the fallback supplies the value there while the
   frontend bundle picks up the live token. */

@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url("/fonts/helvetica-neue-lt-std/HelveticaNeueLTStd-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 85.7%;
  descent-override: 14.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url("/fonts/helvetica-neue-lt-std/HelveticaNeueLTStd-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 85.7%;
  descent-override: 14.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url("/fonts/helvetica-neue-lt-std/HelveticaNeueLTStd-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 85.7%;
  descent-override: 14.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url("/fonts/helvetica-neue-lt-std/HelveticaNeueLTStd-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  ascent-override: 85.7%;
  descent-override: 14.3%;
  line-gap-override: 0%;
}

.ck-content {
  /* Map the project's design tokens (tokens.pcss) onto rich-text use.
     Aliased here — not referenced inline — because two consumers, the
     CKEditor admin pane and the shadow DOM, never load tokens.pcss; the
     `var(--token, …)` fallback supplies the same value there while the
     frontend bundle picks up the live token. Distinct alias names avoid
     a self-referential custom-property cycle. The brand palette has a
     single text-weight grey (--color-muted), so the formerly-distinct
     h5/h6/small greys all collapse onto it. */
  --rt-font:   var(--font-sans,    "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --rt-ink:    var(--color-ink,    #002205); /* body, h1, h3 */
  --rt-accent: var(--color-accent, #a6ce39); /* h2 — Trader Green */
  --rt-muted:  var(--color-muted,  #7e8083); /* small/.text-small/.text-tiny, h5, h6 */
  --rt-link:   var(--color-link,   #a6ce39); /* links */
  font-family: var(--rt-font);
  font-size: 16pt;
  font-weight: 400; /* 55 Roman */
  line-height: 1.42;
  color: var(--rt-ink);
}

.ck-content h1 {
  font-family: var(--rt-font);
  font-size: 25pt;
  font-weight: 900; /* 95 Black */
  line-height: 1.2;
}

.ck-content h2 {
  font-family: var(--rt-font);
  font-size: 20pt;
  font-weight: 700; /* 75 Bold */
  color: var(--rt-accent); /* Trader Green — --color-accent */
  line-height: 1.2;
}

.ck-content h3 {
  font-family: var(--rt-font);
  font-size: 17pt;
  font-weight: 500; /* 65 Medium */
  color: var(--rt-ink);
  line-height: 1.2;
}

.ck-content p {
  font-family: var(--rt-font);
  font-size: 16pt;
  font-weight: 400; /* 55 Roman */
  line-height: 1.42;
}

.ck-content small,
.ck-content .text-tiny {
  font-family: var(--rt-font);
  font-size: 8pt;
  font-weight: 400; /* 55 Roman */
  color: var(--rt-muted);
}

.ck-content .text-small {
  font-family: var(--rt-font);
  font-size: 11pt;
  font-weight: 400; /* 55 Roman */
  color: var(--rt-muted);
}

/* Restore browser-default `bolder` for emphasis. Craft's admin
   `cp.css` ships `b, i em, strong { font-weight: 700; }`, which
   clamps `<strong>` to 700 even inside a 700-weight heading — so
   bolded text inside an H2 (Bold) doesn't visually pop, and the
   editor diverges from the frontend (where no such reset applies).
   Scoped to .ck-content so the admin reset still wins outside. */

.ck-content b,
.ck-content strong {
  font-weight: bolder;
}

/* --- Spacing & layout ---------------------------------------------
   Previously these lived inline in templates/js/closed-richtext.js and
   only reached the frontend shadow DOM. Folded in here so the CKEditor
   admin pane, the frontend bundle, and the shadow DOM all render
   identically. Covers margins, links, images, lists, h4–h6 and the
   .text-big/.text-huge size classes the typography block doesn't set. */

.ck-content h1,
.ck-content .h1 {
  margin-block-start: 0;
  margin-block-end: 24px;
}

.ck-content h2,
.ck-content .h2,
.ck-content h3,
.ck-content .h3 {
  margin-block: 14px;
  margin-inline: 0;
}

.ck-content h4,
.ck-content .h4 {
  margin-block: 14px;
  margin-inline: 0;
  font-weight: bold;
  line-height: 1.2;
}

.ck-content h5,
.ck-content .h5 {
  margin-block: 14px 3px;
  margin-inline: 0;
  font-weight: 400;
  line-height: 1.2;
  font-size: 10.5px;
  color: var(--rt-muted);
}

.ck-content h6,
.ck-content .h6 {
  color: var(--rt-muted);
  font-size: 11px;
  margin: 14px 0 3px;
  text-transform: uppercase;
  font-weight: 400;
}

.ck-content p {
  margin-block: 1em;
}

.ck-content a {
  color: var(--rt-link);
  cursor: pointer;
  text-decoration: none;
}

.ck-content .image {
  clear: both;
  display: table;
  margin: .9em auto;
  min-width: 50px;
  text-align: center;
}

.ck-content .image img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  min-width: 100%;
}

/* Keep embedded media (e.g. raw-html-embed YouTube iframes that carry a
   fixed width="560") from overflowing narrow viewports. */

.ck-content iframe,
.ck-content video,
.ck-content embed,
.ck-content object {
  max-width: 100%;
}

.ck-content figure.table {
  width: -moz-fit-content;
  width: fit-content;
  margin: 1em auto;
}

.ck-content .text-big {
  font-size: 1.5em;
}

.ck-content .text-huge {
  font-size: 2em;
}

.ck-content ol,
.ck-content ul {
  padding: 0;
  padding-left: 40px;
  margin: 0;
}

.ck-content ol {
  list-style-type: decimal;
}

.ck-content ul {
  list-style-type: disc;
}

/* --- Component: exit-intent popup -----------------------------------
   Moved here from the exitIntentRichbox field's inline `css` so it
   survives the field-config unification (every CKEditor field now loads
   Simple.css → this spec). Colours mapped onto the rich-text tokens
   (exact matches, no visual change); the popup's original Helvetica
   face is kept deliberately. */

.ck-content .pop-green-heading {
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: left;
  color: var(--rt-accent);
}

.ck-content .pop-dot-points {
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: var(--rt-muted);
}

/* ============================================================
   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-black:     #000000;

  /* ── Color — semantic ─────────────────────────────────────── */
  --color-brand:        var(--color-black);
  --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-family ──────────────────────────────────────────── */
  --font-sans: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ── 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,
    #202020 -0.77%,
    #131111 28.62%,
    #131111 65.36%,
    #202020 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 ---------- */

html,
body {
    font-family: var(--font-sans);
}

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

a {
    color: inherit;
}

select,
option {
    color: black;
}

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

h3 {
    font-family: var(--font-sans);
    font-size: 25px;
    font-weight: 700;
    line-height: 35px;
    text-align: left;
}

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

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

p {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
}

span {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
}

/* utilities.pcss */

/* Standard vertical rhythm for page components (TRAD-1204). Apply to
   a component's outer wrapper to give it the agreed section spacing. */

.section-spacing {
    padding-top: 40px;
    padding-bottom: 30px;
}

/* Margin twin of .section-spacing — for wrappers whose background
   shouldn't extend into the section gap. */

.section-margin {
    margin-top: 40px;
    margin-bottom: 30px;
}

/* Standard row rhythm for stacked detail lines (TRAD-1204). */

.line-spacing {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Margin variant of the row rhythm — for elements whose backgrounds
   shouldn't extend into the gap (TRAD-1204). */

.line-margin {
    margin-bottom: 20px;
}

.line-margin-top {
    margin-top: 20px;
}

.line-padding-top {
    padding-top: 20px;
}

@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 .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 {
    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: var(--font-sans);
        font-size: 25px;
        font-weight: 700;
        line-height: 35px;
        text-align: center;
        color: var(--color-brand);
    }

.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: var(--font-sans);
        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;
    }

/* 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 .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 .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: var(--font-sans);
    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;
    }
}

/* The resource sliders (category Assets, product-detail Resources,
   search page) are sized in the "Slider context" section of
   style/components/_resource_card.pcss, alongside the card they render. */

@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 {
  background-color: var(--color-brand);
}

@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: var(--font-sans);
    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: var(--font-sans);
    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: var(--font-sans);
    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: var(--font-sans);
    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 blanket `margin: 0 auto`
   auto-centering was removed in TRAD-1204 — centering now comes
   from each container's context (flex parents / utilities.pcss).
   ============================================================ */

.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);
}

/* Product Filter Content */

.product-filter-content {
    display: block;
    text-align: center;
}

/* Expanded Filter Container - Horizontal Layout */

.expanded-filter-container {
    display: flex;
    flex-direction: column;
    /* Same 15px rhythm as the horizontal layout below — the vertical
       sidebar previously relied on per-section margin-bottoms. */
    gap: 15px;
    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 */

.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;
    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 {
        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: var(--font-sans);
    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;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

/* 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 {
    border-top: 5px solid var(--color-accent);
    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;
    }

.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: 40px;
    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: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

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

/* Stack the More Details / wishlist pair on mobile so both stay
   full-width tappable instead of squeezing side by side. */

@media (max-width: 768px) {
    .product-card-content {
        height: 280px;
    }
    .product-card-content .button {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .product-card-content .btn-wishlist {
        justify-content: center;
    }
}

/* 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);
    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;
}

.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%;
}

.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 {
        gap: 77px;
    }
        .catalogue-container .catalogue-right {
            width: 37%;
        }
}

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

/* Stacked mobile layout (below the 520px two-column breakpoint):
   separate the text block from the catalogue image above it. */

@media screen and (max-width: 519px) {
    .catalogue-right-wrapper {
        margin-top: 40px;
    }
}

.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;
    }
    .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;
}

/* 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 {
  flex: 1 1 100%;
}

@media (min-width: 768px) {

  .content-split-wrap .content-container-1 .content-split {
    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;
}

.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 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) ---------- */

@media screen and (max-width: 1170px) {
    .content-split-wrapper {
        margin: 0 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: var(--font-sans);
    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;
}

.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%;
    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 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    flex: 1 0 50%;
}

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

.contact-card-subHeading {
    font-family: var(--font-sans);
    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: var(--font-sans);
    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: var(--font-sans);
    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: var(--font-sans);
    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;
}

/* ---------- 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%;
}

/* templates/css/style/components/_assets_card.pcss
   Asset-card + team-card slider cluster — the .swiper-slide.card >
   .left-content / .right-content > .assets-card-details-container
   structure. Used by:
   - _components/_slider/_revit.twig (.revit-asset__section)
   - Project-team slider (.swiper-team-card / .project-team-slider)
   - Various asset / category sliders using .swiper-assets-card

   The resource sliders (category Assets, product-detail Resources,
   search page) used to render this structure too, as a fork of the
   /resources/* listing card. They render the shared card component
   instead now — see the "Slider context" section of _resource_card.pcss
   — so only the section wrappers here (.assets-slider,
   .assets-slider-wrapper, .assets-slider-content, .assets-wrapper) still
   apply to them. */

/* ---------- 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;
}

.project-team-slider {
    max-width: 100dvw;
    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;
}

/* ---------- 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 {
    display: grid;
    grid-template-columns: 0.7fr 1fr;
    width: auto;
    max-width: 475px;
    border: 1px solid var(--color-hairline);
    background-color: var(--color-surface);
}

/* The Revit variant is slightly shorter and has a fixed (not max-)
   width. */

.revit-asset__section .swiper-assets-card .card {
    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: var(--font-sans);
    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;
}

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

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

.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 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-family: var(--font-sans);
    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. The card markup itself is a single Twig
   component, _components/_cards/_resource_card.twig, rendered by:
     - /resources/{catalogues,casestudies,product-downloads,videos}
       via _components/_filter/_sprig_resources_expanded (+ the
       _sprig_resources_no_filter variant used on hiddenPages)
     - the resource sliders — category Assets, product-detail Resources
       and the search page — see the "Slider context" section at the
       bottom of this file
     - _components/_listing/_revitListing.twig, which hand-rolls the same
       classes for Revit entries

   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%;
}

/* position:relative is the containing block for the .video-label play
   badge the card overlays on the thumbnail.

   On width/padding: style.css originally said 205px/20px, but
   utilities.pcss followed up with 200/10, which is what production
   actually rendered. Smaller values preserved here. The slider context
   restores the 20px padding — see the bottom of this file. */

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

.resource-container .resource-card-image,
.resource-card-slider .resource-card-image {
    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%;
    height: 100%;
    justify-content: space-between;
}

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

.resource-card-details h2 {
    font-family: var(--font-sans);
    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: var(--font-sans);
    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: var(--font-sans);
    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 card's CTA macros 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 {
    width: 100%;
}

/* Cards that carry both a video and a downloadable asset render two CTAs
   side by side, wrapping to stacked full-width buttons once the right
   column gets too narrow for both labels. */

.resource-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.resource-card-actions .btn {
    flex: 1 1 145px;
}

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

.download-btns {
    font-family: var(--font-sans);
    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%;
        }
}

/* ---------- Slider context ---------- */

/* The resource sliders put this same .resource-card inside a
   .swiper-slide: the category "<Category> Assets" slider
   (_slider/_product_resources), the product-detail "<Product> Resources"
   slider (_slider/_product_resources_product) and the search page.
   `.resource-card-slider` goes on the .swiper element.
   Everything the sliders need beyond the shared card lives here — it
   replaces the rules that used to shape their old bespoke
   .swiper-slide.card / .left-content / .assets-card-details-container
   markup (`.product-resources__card .card`, `.product-resource-slider
   .swiper-slide.card`, `.assets-card-details-container .context`, …). */

/* Swiper runs slidesPerView:'auto' above 768px, so the slide carries the
   width. 475px is what the retired .product-resources__card .card and
   .product-resource-slider .swiper-slide.card rules used. */

.resource-card-slider .swiper-slide {
    min-width: 475px;
    max-width: 475px;
    height: auto;
}

/* Stretch every slide to the tallest sibling so a long title or body
   doesn't leave the row ragged. Swiper sets display:flex on
   .swiper-wrapper but doesn't enforce stretch. */

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

.resource-card-slider .resource-card {
    height: 100%;
}

/* A 475px card leaves the right column much narrower than the listing's
   2-column grid does, so the body clamps at 3 lines rather than 5 —
   the density the retired .assets-card-details-container .context rule
   gave these sliders. */

.resource-card-slider .resource-card-details .context {
    -webkit-line-clamp: 3;
}

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

/* 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;
}

/* Hide the floating arrow row on mobile — slides are swipeable by
   touch, and the overlaid 48px buttons crowd the cards on small
   screens. The plural bottom row (with the "view all" CTA) stays. */

@media (max-width: 768px) {
    .swiper-content-card-button {
        display: none;
    }
}

/* 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;
    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;
}

/* ---------- 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: var(--font-sans);
    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);
    }
}

/* ---------- 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: 200px;
}

/* ---------- 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;
}

/* 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);
}

/* ---------- 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:
   - .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 ---------- */

/* The site-wide `.swiper-slide img { display:block; width:100%;
   height:100%; margin:0 auto }` base rule used to live here. Removed:
   at (0,1,1) it outranked `.resource-card-image` (0,1,0) and stretched
   the resource-card thumbnail to fill its column in every slider that
   renders the shared card. Slides that need image sizing set it in
   their own context rule. */

.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. */

/* 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;
}

.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;
    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);
}

/* ---------- Quote form layout ---------- */

.product-quote-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product-quote-container {
    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: var(--font-sans);
    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: var(--font-sans);
    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: var(--font-sans);
    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;
}

/* Hover bridge. The dropdown/megamenu panels are position:fixed and open at
   `top: var(--nav-height)` (~75px), but the nav row collapses to its text
   height, so the link bottom sits ~38px above the panel. That leaves a dead
   gap: moving the cursor from the link down to the panel exits the nav item
   and fires the mouseleave in megamenu.js that hides the menu (see lines
   75-102). This invisible strip below the hovered item keeps the cursor inside
   the item while crossing the gap. Only on :hover so it never intercepts
   clicks on page content below the header otherwise. Covers both the "Other
   Tab" .dropdown items and the Products item (.nav__item holding .megamenu). */

.nav__item.dropdown,
.nav__item:has(.megamenu) {
    position: relative;
}

.nav__item.dropdown:hover::after,
.nav__item:has(.megamenu):hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 42px;
}

/* ---------- @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 {
    /* fixed (not absolute) so `top: var(--nav-height)` resolves against the
       viewport and the panel sits flush under the fixed header. As an
       absolute box it was offset from .nav__list (the vertically-centred
       nav row), opening ~37px below the header — matches .megamenu now. */
    position: fixed;
    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;
}

/* Desktop spaces these sub-items with 30px (base rule above). Mobile uses
   the 20px nav-item rhythm instead (the global `.m-nav-menu li a` and the
   other nav items' subitems), so pin every mobile sub-level to a 20px gap.
   Covers all .megamenu-item-sub depths; the redundant anchor padding is
   dropped so the margin is the sole gap. Top-level mobile items keep their
   own `.m-nav-menu li a` padding. */

.m-nav-menu .megamenu-item-sub {
    margin-bottom: 20px;
}

.m-nav-menu .megamenu-item-sub a {
    padding-bottom: 0;
}

/* "All products" category list rows (.megamenu__link.is-catalog) — the most
   visible Products level. Match the 30px gap the other nav dropdowns use
   between their sub-items (`.dropdown-menu li:not(:first-child)
   { padding-top: 30px }`). Both viewports share this .is-catalog wrapper, so
   one rule on its anchor unifies them with that 30px whitespace gap. Higher
   specificity than `.m-nav-menu li a`, so it overrides the mobile 20px; on
   desktop the anchor padding was 0, so it adds the full 30px. */

.megamenu__link.is-catalog a {
    padding-bottom: 30px;
}

/* Mobile uses a 20px nav-item rhythm (the global `.m-nav-menu li a` and the
   other nav items' subitems), so the desktop 30px above would stand out.
   Pin the mobile category rows to that same 20px gap. */

.m-nav-menu .megamenu__link.is-catalog a {
    padding-bottom: 20px;
}

/* "View by Style" / "View by Range" submenu columns (.content-b rows) sat
   flush with no gap (~22px line-height pitch), out of step with the 30px
   used by the first category column and the other nav dropdowns. Give these
   .megamenu__item rows the same 30px gap. .content-b is desktop-only markup
   (the mobile menu uses .m-nav-menu), so no mobile override is needed; scoped
   to .megamenu__item so the .megamenu-item-sub product rows in the same
   column keep their own 30px margin rather than stacking a second gap. */

.content-b .megamenu__item a {
    padding-bottom: 30px;
}

/* ---------- .header__megamenu ---------- */

.header__megamenu {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Bottom gap is set in app.pcss (the late override layer that resets these
       menu margins) — see `.header__megamenu` there. */
}

.header__megamenu .megamenu__link a span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-on-brand);
    font-family: var(--font-sans);
    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: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: var(--font-sans);
    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 {
    /* Sits below the fixed header (top: --nav-height). Height must subtract
       that offset, otherwise the overlay (the scroll container) runs
       --nav-height past the viewport bottom and its last item can't be
       scrolled into view. */
    height: calc(100% - var(--nav-height));
    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;
    }

    /* The 90vh cap belongs to the desktop megamenu's brand-column grid. On
       mobile the same .submenu-container holds a 3rd-level list inside the
       scrolling overlay, so the cap clipped the box at 90vh — drawing the
       accent border-bottom mid-list with items overflowing past it and no way
       to scroll within. Let it size to its content; the overlay scrolls. */
    .submenu-container {
        max-height: none;
    }

    .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: var(--font-sans);
    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: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    color: var(--color-muted);
}

.pop-green-heading {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    color: var(--color-accent);
}

.pop-dot-points {
    font-family: var(--font-sans);
    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;
    }
    .content-container-1 .sg-swatch-grid.home {
        flex-wrap: wrap;
    }
}

.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: var(--font-sans);
    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;
    }
    .content-container-1 .sg-type-row.home {
        flex-wrap: wrap;
    }
}

.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: var(--font-sans);
}

.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;
    }
    .content-container-1 .sg-token-row.home {
        flex-wrap: wrap;
    }
}

.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;
    }
    .content-container-1 .sg-grid-demo.home {
        flex-wrap: wrap;
    }
}

.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;
    }
    .content-container-1 .sg-bp-list.home {
        flex-wrap: wrap;
    }
}

.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;
    }
    .content-container-1 .sg-btn-grid.home {
        flex-wrap: wrap;
    }
}

.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;
    }
    .content-container-1 .sg-form-grid.home {
        flex-wrap: wrap;
    }
}

.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: var(--font-sans);
    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: var(--font-sans);
    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: var(--font-sans); /* 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;
}

.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-r {
  border-right-width: 1px;
}

.border-\[\#7E8083\] {
  --tw-border-opacity: 1;
  border-color: rgb(126 128 131 / 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-\[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-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-inline: auto;
}

.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;
}

/* Section headers ("All products", "View by Style/Range") sat flush above
   their first item. Give them the 30px gap the items use on desktop, and the
   20px nav-item rhythm inside the mobile overlay. */

.header__megamenu {
  margin-bottom: 30px;
}

.m-nav-menu .header__megamenu {
  margin-bottom: 1.25rem;
}

.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);
}

.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: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--color-brand);
}

.project-card-details-container .detail .month {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 18.4px;
  text-align: left;
  color: #7e8083;
}

.project-card-details-container .detail-contact {
  font-family: var(--font-sans);
  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: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: var(--color-brand);
  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-card-image {
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 768px) {

  .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 @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: var(--font-sans);
  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; flex-shrink: 0; }

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\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:gap-0 {
    gap: 0px;
  }

  .md\:gap-y-0 {
    row-gap: 0px;
  }

  .md\:px-\[20px\] {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@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;
  }
}