/* Knowledge-Centre content blocks — visual design to match the block-library mockup.
   Shipped with the FalconTwo.Web.Content RCL (served at _content/FalconTwo.Web.Content/kc-blocks.css).
   Accent colour = the brand orange (--hot-orange-d1, from the site's compiled.css) with a hex fallback so
   the accents are orange on the live site AND in the F2 editor preview (which doesn't load the site CSS).
   Buttons reuse the site's .btn.primary-btn (brand blue). */

:root {
    --kc-navy: #1b2a4a;
    --kc-panel: #f6f4f0;
    --kc-muted: #6b7280;
    --kc-radius: 14px;
    --kc-accent: var(--hot-orange-d1, #ff8e1d);
}

/* Block width (the common "Width" setting on every building block; Page Default resolves to one of these
   before render). Max-width only — a block can never exceed its parent container; narrower blocks centre.
   The page hosts are full-width, so Wide == the site's normal content width (the header nav's ExtraLarge
   container: 1440px − 2×24px gutters ≈ 1392px), keeping blocks + chrome aligned to the header/logo edges.
   Content is the mid size for richer content; Full Width lets a block span the whole available page.
   Also used to keep page chrome (breadcrumb/H1) at Wide. */
.block-width-narrow { max-width: 860px; margin-left: auto; margin-right: auto; }
.block-width-content { max-width: 1080px; margin-left: auto; margin-right: auto; }
.block-width-wide { max-width: 1392px; margin-left: auto; margin-right: auto; }
.block-width-full { max-width: none; }


/* Divider (the "Divider = Line" block setting): a subtle separator rendered after a block. It sits inside the
   block's width wrapper, so it spans the block's own width. */
.block-divider { border: 0; border-top: 1px solid rgba(27, 42, 74, .12); margin: 2rem 0 0; }

/* Block spacing (the "Spacing" block setting): vertical gap BEFORE each block. Scoped to .web-page (the content
   page body) so shared homepage/other DynamicContent placements are untouched. Applied as padding-top on the
   block's width wrapper — padding doesn't margin-collapse, so the gap is deterministic — and the legacy per-type
   block margins (e.g. .hero-block { margin: 1.75rem 0 }) are zeroed inside the wrapper so they don't stack on top.
   Default = 64px (the baseline the MD asked for). */
.web-page .dynamic-container { padding-top: 0; }
.web-page .dynamic-container.block-spacing-none { padding-top: 0; }
.web-page .dynamic-container.block-spacing-small { padding-top: 32px; }
.web-page .dynamic-container.block-spacing-default { padding-top: 64px; }
.web-page .dynamic-container.block-spacing-large { padding-top: 96px; }
.web-page .dynamic-container > :first-child { margin-top: 0; }
.web-page .dynamic-container > :last-child { margin-bottom: 0; }
/* The FIRST block on a page has nothing above it but the breadcrumb/chrome, so it starts flush (no leading gap) —
   matching the category/product pages where the content sits right under the breadcrumb. Block spacing only ever
   separates one block from the NEXT. Overrides the per-block spacing above via higher specificity. */
.web-page .kc-reveal:first-child .dynamic-container { padding-top: 0; }

/* Content-page block reveal: hidden from first paint (no flash), then fades + zooms IN once as it scrolls into
   view (kc-reveal.js flips [data-kc-revealed]). 0.6s; a small per-block transition-delay staggers the cascade. */
.kc-reveal { opacity: 0; transform: scale(.97); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.kc-reveal[data-kc-revealed] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .kc-reveal { opacity: 1; transform: none; transition: none; } }

.hero-block, .cta-block, .quote-block, .statistics-block,
.markup-image-block, .video-block, .download-block, .image-grid-content,
.image-gallery-block, .accordion-block {
    margin: 1.75rem 0;
}

/* hero (article header) */
.hero-block { background: #fff; border-radius: var(--kc-radius); overflow: hidden; height: 320px; }
.hero-block .mud-grid { height: 100%; }   /* fill the fixed height so the image + content columns stretch to it */
/* Content sits inset from the card edges; the right padding keeps the copy clear of the full-bleed image.
   A flex column lets the meta row pin to the bottom (margin-top:auto) when the image makes the card taller. */
.hero-block .kc-hero-content { padding: 1.5rem 2rem; display: flex; flex-direction: column; }
.hero-block .kc-eyebrow {
    align-self: flex-start;           /* stay shrink-wrapped in the flex column (don't stretch to full width) */
    display: inline-block;
    background: var(--hot-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 600;                 /* Semibold */
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
    padding: .4rem .6rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.hero-block .mud-typography-h1 { 
    color: var(--kc-navy); 
}

.hero-block .kc-hero-copy, .hero-block .kc-hero-copy p {
    font-size: 1rem;                  /* 16px */
    font-weight: 400;                 /* Regular */
    line-height: 1.6;
    color: var(--kc-muted);
    margin: 0;
}
/* meta row: 12px muted, icon + label pairs (read time · last updated); pinned to the bottom of the content column. */
.hero-block .kc-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: auto; padding-top: 1.5rem; font-size: 12px; color: var(--kc-muted); }
.hero-block .kc-hero-meta-item { display: inline-flex; align-items: center; gap: .4rem; }
.hero-block .kc-hero-meta-icon { font-size: 16px !important; height: 16px !important; width: 16px !important; color: var(--kc-muted); }
/* image: fills its column and bleeds to the top/right/bottom edges (the card's overflow:hidden clips it to the
   rounded corners). The left edge fades to transparent, dissolving the photo into the white card. */
.hero-block .kc-hero-media { display: flex; }
.hero-block .kc-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32%);
    mask-image: linear-gradient(to right, transparent 0, #000 32%);
}
/* Stacked layout: content padding tightens and the image shows at a bounded height instead of filling a tall
   column. The left-edge fade is a side-by-side effect — drop it so the full image shows as a clean banner. */
@media (max-width: 959.98px) {
    /* Stacked: the fixed desktop height would crop the stacked content + image, so let it grow. */
    .hero-block { height: auto; }
    .hero-block .mud-grid { height: auto; }
    .hero-block .kc-hero-content {
        padding: 1.75rem 1.5rem;
    }

    .hero-block .kc-hero-media img {
        height: auto;
        max-height: 260px;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* 3 — Content + Image */
.markup-image-block { padding: 1rem 0; }
/* Author-chosen text alignment for the copy column (the image column uses MudBlazor justify-* utilities). */
.markup-image-block .mia-align-left { text-align: left; }
.markup-image-block .mia-align-center { text-align: center; }
.markup-image-block .mia-align-right { text-align: right; }

/* Rich-text (Markup) lists: the site's global reset strips the default list indent, leaving bullets flush with
   the copy. Indent them so the markers sit just inside the text column. Applies wherever MarkUpContent renders. */
.markup-content ul, .markup-content ol { padding-left: 1.5rem; }
/* Optional author-chosen alignment on a Markup block (empty/left = default). */
.markup-content.mc-align-center { text-align: center; }
.markup-content.mc-align-right { text-align: right; }

/* ---- Readable body typography for the two TEXT-content blocks only: the standalone Markup block (its
   .markup-content is a direct child of .dynamic-container) and Markup + Image (its .markup-content is nested under
   .markup-image-block). Both funnel author copy through .markup-content — which is ALSO reused by
   Hero/CTA/Video/Download/Accordion, so those are deliberately NOT matched here and keep their bespoke type.
   Ships in this RCL stylesheet, so it renders identically on the website and both F2 previews (all wrap the block
   in .dynamic-container). Spec: 16px paragraphs; heading line-height 120%; paragraph line-height 150%; 24px below
   a heading (heading -> its paragraph); 48px above a heading (paragraph -> next heading, via margin collapse). */
.dynamic-container > .markup-content p,
.markup-image-block .markup-content p {
    font-size: 16px;
    line-height: 1.5;
}
.dynamic-container > .markup-content h1, .dynamic-container > .markup-content h2,
.dynamic-container > .markup-content h3, .dynamic-container > .markup-content h4,
.dynamic-container > .markup-content h5, .dynamic-container > .markup-content h6,
.markup-image-block .markup-content h1, .markup-image-block .markup-content h2,
.markup-image-block .markup-content h3, .markup-image-block .markup-content h4,
.markup-image-block .markup-content h5, .markup-image-block .markup-content h6 {
    line-height: 1.2;
    margin-top: 48px;
    margin-bottom: 24px;
}
/* Heading scale for body content: a clean, monotonic ladder that keeps every level AT OR ABOVE the 16px body
   (the site's default markup headings drop below body at h4-h6, which reads as broken next to 16px copy). h2 keeps
   its existing 24px; only h4-h6 are effectively bumped. Bold weight is inherited from the site's heading styles. */
.dynamic-container > .markup-content h1, .markup-image-block .markup-content h1 { font-size: 32px; }
.dynamic-container > .markup-content h2, .markup-image-block .markup-content h2 { font-size: 24px; }
.dynamic-container > .markup-content h3, .markup-image-block .markup-content h3 { font-size: 20px; }
.dynamic-container > .markup-content h4, .markup-image-block .markup-content h4 { font-size: 18px; }
.dynamic-container > .markup-content h5, .markup-image-block .markup-content h5 { font-size: 16px; }
.dynamic-container > .markup-content h6, .markup-image-block .markup-content h6 { font-size: 16px; }
/* The block's own Spacing setting owns the gap ABOVE the block, so the first element mustn't add a leading gap. */
.dynamic-container > .markup-content > :first-child,
.markup-image-block .markup-content > :first-child {
    margin-top: 0;
}

/* 7 — Call to action: dark navy panel, white text, orange button */
.cta-block { background: var(--kc-navy); border-radius: var(--kc-radius); padding: 2.5rem 3rem; }
.cta-block .mud-typography { color: #fff; }
.cta-block .cta-sub, .cta-block p { color: rgba(255,255,255,.72); margin: 0; }
/* Optional CTA image (right of the copy): bounded, keeps its aspect, never crops. */
.cta-block .cta-image { max-height: 170px; width: auto; max-width: 100%; object-fit: contain; }

/* 21 — Section Header: section intro — H2 + optional 16px description + optional CTA. Alignment via .sh-align-*
   (default centre), applied to the whole block so the heading, description and button all follow it. */
.section-header-block { margin: 1.75rem 0; }
.section-header-block.sh-align-left { text-align: left; }
.section-header-block.sh-align-center { text-align: center; }
.section-header-block.sh-align-right { text-align: right; }
.section-header-block .section-header-heading { color: var(--kc-navy); font-weight: 800; margin: 0 0 .5rem; }
.section-header-block .section-header-desc { font-size: 1rem; line-height: 1.6; color: var(--kc-muted); max-width: 46rem; margin: 0; }
.section-header-block.sh-align-center .section-header-desc { margin-left: auto; margin-right: auto; }
.section-header-block.sh-align-right .section-header-desc { margin-left: auto; }
.section-header-block .section-header-cta { margin-top: 1.25rem; }

/* 8 — Quote / testimonial: soft panel, big orange quote mark, avatar */
.quote-block { background: var(--kc-panel); border-radius: var(--kc-radius); padding: 2.5rem; }
.quote-block .quote-mark { font-size: 3.25rem; line-height: .6; color: var(--kc-accent); }
.quote-block .kc-quote-author { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.quote-block .kc-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }

/* User / author byline block ("content meta"): white card — accent title, avatar + written-by name/job title,
   bio copy behind a vertical rule, and topic-tag chips (right) that deep-link into the KC search. */
.user-block { background: #fff; border-radius: var(--kc-radius); padding: 1.5rem 2rem; }
.user-block-title { color: var(--kc-accent); font-weight: 700; font-size: 28px; line-height: 1.2; margin: 0 0 1.25rem; }
.user-block-row { display: flex; align-items: center; gap: 1.5rem; }
.user-block-person { display: flex; align-items: center; gap: .9rem; flex: 0 0 auto; }
.user-block-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.user-block-person-text { display: flex; flex-direction: column; gap: 2px; }
.user-block-eyebrow { color: var(--kc-muted); font-size: .85rem; }
.user-block-name { color: var(--kc-navy); font-weight: 700; font-size: 1.05rem; }
.user-block-role { color: var(--kc-muted); font-style: italic; font-size: .9rem; }
.user-block-desc { flex: 1 1 auto; color: var(--kc-muted); font-size: 16px; line-height: 1.5; border-left: 1px solid rgba(27, 42, 74, .15); padding-left: 1.5rem; }
/* Right column: company social icons on top, topic-tag chips beneath (as in the mockup). margin-left:auto keeps
   it pinned right even when there's no description to flex into the middle. */
.user-block-side { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; flex: 0 0 auto; max-width: 30%; margin-left: auto; }
.user-block-socials { display: flex; gap: .5rem; }
.user-block-social { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--kc-navy); color: #fff; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.user-block-social:hover { background: #32446b; color: #fff; text-decoration: none; }
.user-block-social .mud-icon-root { width: 17px; height: 17px; font-size: 17px; }
.user-block-tags { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.user-block-tag { border: 1px solid #a9c6e8; color: #2f6db4; background: #fff; border-radius: 999px; padding: .3rem 1rem; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.user-block-tag:hover { background: #eef4fb; text-decoration: none; }
@media (max-width: 960px) {
    .user-block-row { flex-direction: column; align-items: flex-start; }
    .user-block-desc { border-left: 0; padding-left: 0; }
    .user-block-side { align-items: flex-start; max-width: none; margin-left: 0; }
    .user-block-tags { justify-content: flex-start; }
}

/* 9 — Statistics: centred columns, orange icon, big figure, muted label */
.statistics-block { padding: 1.5rem 0; }
.statistics-block .kc-stat-icon { font-size: 2.75rem !important; height: 2.75rem; width: 2.75rem; color: var(--kc-accent) !important; }
.statistics-block .kc-stat-value { font-size: 2.6rem; font-weight: 800; line-height: 1.1; }
.statistics-block .kc-stat-label { color: var(--kc-muted); }

/* 6 — Featured content / image grid: "Read more →" link */
.image-grid-content .kc-read-link { font-weight: 700; display: inline-block; margin-top: .35rem; color: var(--kc-accent); }

/* 12 — Download: PDF icon + text */
.download-block .kc-download-icon { font-size: 4rem !important; height: 4rem; width: 4rem; color: #d23f3f; }
.download-block .kc-download-link { font-weight: 700; }

/* 19 — Page carousel + the shared page-card grid (Summary style below; Article style at the foot of this file).
   The .kc-page-cards grid + card selectors are UNSCOPED because PageCardGrid is reused standalone by the search
   results page and the landing-page defaults (not only inside .page-carousel-block). */
.page-carousel-block { margin: 1.75rem 0; }
.page-carousel-block .kc-cards-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.kc-page-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.kc-page-card { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: var(--kc-radius); overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .15s ease; }
.kc-page-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.kc-page-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--kc-panel); }
.kc-page-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-card-badge { position: absolute; top: .6rem; left: .6rem; background: #fff; border-radius: 6px; padding: .2rem .5rem; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1f2937; }
.kc-page-card-body { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem 1rem; flex: 1; }
.kc-card-title { font-weight: 700; line-height: 1.35; }
.kc-card-summary { color: var(--kc-muted); font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kc-card-more { margin-top: auto; font-weight: 700; font-size: .85rem; color: var(--kc-accent); }

/* 22 — Category Image Grid: author-picked categories as image + name cards (4-up desktop, 2-up mobile). */
.category-grid-block { margin: 1.75rem 0; }
.category-grid-block .kc-cards-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.category-grid-block .category-grid-heading { color: var(--kc-navy); font-weight: 800; margin: 0; }
.category-grid-block .category-grid-link { font-weight: 700; white-space: nowrap; color: var(--hot-blue, #1368aa); text-decoration: none; }
.category-grid-block .category-grid-link:hover { text-decoration: underline; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.category-grid-card { display: block; border-radius: var(--kc-radius); overflow: hidden; background: #eef3f6; text-decoration: none; color: inherit; transition: box-shadow .15s ease; }
.category-grid-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.category-grid-media { aspect-ratio: 4 / 3; background: #dfe8ee; }
.category-grid-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-grid-label { display: block; text-align: center; font-weight: 700; color: var(--kc-navy); padding: .7rem .5rem; }
@media (max-width: 959.98px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }

/* Page carousel — Article display style (WebContentCardStyle.Article): image-forward cards with a read-time
   meta row. UNSCOPED like the Summary .kc-page-cards grid, since PageCardGrid emits these standalone too. */
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.25rem; }
.article-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--kc-radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .15s ease; }
.article-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.article-card-media { aspect-ratio: 16 / 10; background: var(--kc-panel); }
.article-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; flex: 1; }
.article-card-badge { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hot-blue, #1368aa); }
.article-card-title { font-weight: 700; line-height: 1.35; color: var(--kc-navy); }
.article-card-meta { display: flex; align-items: center; gap: .4rem; margin-top: auto; font-size: .78rem; color: var(--kc-muted); }
.article-card-meta-icon { font-size: 15px !important; height: 15px !important; width: 15px !important; color: var(--kc-muted); }

/* Featured cards: uniform 4:3 thumbnails so the row stays even. */
.image-grid-content img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
/* Gallery: uniform square thumbnails. */
.image-gallery-block img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; }
/* Quote avatar already fixed-size via .kc-avatar; product cards show the whole product (no crop), bounded height. */
.category-carousel-multi-mini .content-center img { max-height: 200px; width: auto; max-width: 100%; object-fit: contain; }

/* ---- Knowledge Centre navigation: breadcrumbs, search banner, results refine bar ---- */


/* 20 — Page Search banner (block) + the results-page refine bar */
/* Block: no cream panel — the search sits clean on the page, centred. (Keeps bg-image support for authored banners.) */
.page-search-block { position: relative; border-radius: var(--kc-radius); overflow: hidden; background-size: cover; background-position: center; margin: 1.75rem 0; }
.page-search-overlay { position: relative; padding: 2rem 1rem; text-align: center; }
.page-search-block[style*="background-image"] .page-search-overlay { background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.30) 100%); }
.page-search-heading { font-size: 2.4rem; font-weight: 800; color: var(--kc-navy); margin: 0 0 .5rem; }
.page-search-subtext { color: var(--kc-muted); max-width: 34rem; margin: 0 auto 1.25rem; }
.kc-search-form, .kc-search-refine { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 40rem; align-items: center; }
.kc-search-refine { max-width: none; margin: .5rem 0 1.5rem; }
.kc-search-input { flex: 1 1 14rem; min-width: 0; padding: .7rem 1rem; border: 1px solid #d7dbe0; border-radius: 10px; font-size: 1rem; background: #fff; }
.kc-search-select { padding: .7rem 1rem; border: 1px solid #d7dbe0; border-radius: 10px; font-size: 1rem; background: #fff; }
.kc-search-btn { padding: .7rem 1.4rem; border: none; border-radius: 10px; font-weight: 700; background: var(--kc-accent); color: #fff; cursor: pointer; }
.kc-search-btn:disabled { opacity: .6; cursor: default; }
.kc-search-note { font-size: .78rem; color: var(--kc-muted); margin-top: .5rem; }

/* Page Search BLOCK only: one clean, centred white box — borderless input + magnifying-glass submit.
   (The results-page refine bar keeps the standard input/select/button styling above.) */
.page-search-block .kc-search-form {
    flex-wrap: nowrap;
    gap: .25rem;
    max-width: none;                  /* width is defined by the surrounding column (MudItem), not a fixed px cap */
    padding: .25rem .25rem .25rem .75rem;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    text-align: left;
}
.page-search-block .kc-search-input { flex: 1 1 auto; border: none; background: transparent; padding: .6rem .25rem; }
.page-search-block .kc-search-input:focus { outline: none; }
.page-search-block .kc-search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .65rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--kc-muted);
    cursor: pointer;
}
.page-search-block .kc-search-btn:hover:not(:disabled) { color: var(--kc-navy); }
.page-search-block .kc-search-btn svg { display: block; }

/* 24 — Products List: one product-search block with three author-chosen display styles (List / Carousel / Grid).
   All three use the same vertical product card; the container + card detail differ (see ProductsListCard). Layout
   is defined here (self-contained) so every style renders on the live site AND in the F2 preview, which doesn't
   load the site's compiled.css utilities. Fine visual utilities (borders, price colours) reuse the same site
   classes the original Product List/Grid blocks use, so the look matches. */
/* The block itself is transparent (no outer card) — the products are the cards. */
.products-list-block { margin: 1.75rem 0; background: transparent; }
.products-list-block .pl-head { margin-bottom: 1rem; }

/* Shared vertical card: a plain white card (no border or shadow), image tile with the favourite
   overlaid, then code / name / price / meta. */
.products-list-block .pl-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--kc-radius); padding: .85rem; }
.products-list-block .pl-card-media { position: relative; }
.products-list-block .pl-card-media img { width: 100%; height: auto; display: block; border-radius: 8px; }
.products-list-block .pl-fav { position: absolute; top: .35rem; right: .35rem; z-index: 2; color: #e0245e; }
.products-list-block .pl-code { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.products-list-block .pl-card-name { color: inherit; text-decoration: none; display: block; }
.products-list-block .pl-card-name:hover { text-decoration: underline; }
.products-list-block .pl-meta { display: flex; flex-direction: column; gap: .15rem; font-size: .78rem; }

/* List style: a single row of detailed cards (wraps on smaller widths). */
.products-list-block .pl-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 959.98px) { .products-list-block .pl-list { grid-template-columns: repeat(2, 1fr); } }

/* Grid style: a wrapping multi-row grid of cards. */
.products-list-block .pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
@media (max-width: 599.98px) { .products-list-block .pl-grid { grid-template-columns: repeat(2, 1fr); } }

/* Carousel style card: unlike List/Grid, the white sits ONLY behind the product image (a plain white tile) —
   the name/price sit on the block background with no card border or shadow (matches the mockup). The
   .pl-carousel modifier is on the block's own element, so this covers both the desktop slider and the mobile row. */
.products-list-block.pl-carousel .pl-card { background: transparent; border: none; box-shadow: none; padding: 0; }
.products-list-block.pl-carousel .pl-card-media { background: #fff; border-radius: var(--kc-radius); padding: .85rem; }

/* Carousel style: the site's HotCarousel (same dot indicator as the home hero) on desktop, a horizontal
   scroll-snap row on mobile. HotCarousel's own layout/dot styles live in the site's compiled.css (absent in the
   F2 preview), so mirror the essentials here — scoped to this block — using the same CSS vars (with fallbacks) so
   it's identical to the hero on the live site and still renders in the editor preview. */
.products-list-block .hot-carousel { position: relative; overflow: hidden; width: 100%; user-select: none; }
.products-list-block .hot-carousel .slides { display: flex; transition: transform .6s ease; margin-bottom: 0; }
.products-list-block .hot-carousel .slide { flex: 0 0 100%; width: 100%; }
/* Dots sit in normal flow BELOW the cards (unlike the hero, which overlays them on the image at bottom:10px).
   Absolute positioning against the variable-height slide made them jump between prerender and hydration. */
.products-list-block .hot-carousel .dots { position: static; bottom: auto; width: 100%; text-align: center; margin-top: 1rem; }
.products-list-block .hot-carousel .dot { display: inline-block; width: 12px; height: 12px; margin: 0 4px; padding: 0; border-radius: 50%; border: 1px solid var(--hot-grey-l1, #c3c7cf); background: var(--hot-grey-l2, #e5e7eb); cursor: pointer; transition: all .15s linear; }
/* Selected dot: solid hotline brand blue (overrides the hero's lighter active style). */
.products-list-block .hot-carousel .dot.active { border-color: var(--hot-blue, #1368aa); background: var(--hot-blue, #1368aa); pointer-events: none; }
.products-list-block .hot-carousel .dot:not(.active):hover { transform: scale(1.1); }
/* Prev/next arrows (HotCarousel ShowArrows) — this block is currently the only consumer, so the arrow styling
   lives here rather than in the shared component's site-only SCSS. */
.products-list-block .hot-carousel-arrow { position: absolute; top: 45%; transform: translateY(-50%); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: transparent; cursor: pointer; color: var(--kc-muted, #6b7280); }
.products-list-block .hot-carousel-arrow:hover { color: var(--kc-navy, #1b2a4a); }
.products-list-block .hot-carousel-arrow-prev { left: 0; }
.products-list-block .hot-carousel-arrow-next { right: 0; }
.products-list-block .pl-carousel-page { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; padding: 0 2.75rem; }
.products-list-block .pl-carousel-scroll { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
.products-list-block .pl-carousel-scroll-item { flex: 0 0 60%; scroll-snap-align: start; }
@media (min-width: 600px) { .products-list-block .pl-carousel-scroll-item { flex-basis: 38%; } }