/* ================================================
   Lionex Products Landing Page
   ================================================ */

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Products landing: hero → breadcrumbs → category grid (intro on Our Mission) */
/* Body prose links (category pages, sections — not product names; use trademark-link) */
.prose-link {
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.prose-link:hover,
.prose-link:focus {
    text-decoration: underline;
}

/* ================================================
   Product Categories – clean card grid (no images)
   Matches Resources hub style
   ================================================ */
.product-categories {
    scroll-margin-top: 20px;
}

.product-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 800px) {
    .product-cards {
        grid-template-columns: 1fr;
    }
}

/* Card order on wider viewports (2-col grid). Use product-card--order-N (1–12). */
@media (min-width: 801px) {
    .product-card--order-1 { order: 1; }
    .product-card--order-2 { order: 2; }
    .product-card--order-3 { order: 3; }
    .product-card--order-4 { order: 4; }
    .product-card--order-5 { order: 5; }
    .product-card--order-6 { order: 6; }
    .product-card--order-7 { order: 7; }
    .product-card--order-8 { order: 8; }
    .product-card--order-9 { order: 9; }
    .product-card--order-10 { order: 10; }
}

.product-card {
    display: block;
    position: relative;
    padding: 24px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--lionex-primary);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease;
}

.product-card h3 {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: var(--lionex-primary-dark);
}

/* Second line (descriptor) – same color as header, lighter weight */
.product-card__descriptor {
    display: block;
    margin-top: 2px;
    font-weight: 400;
}

.product-card p {
    margin: 0;
    color: var(--lionex-text);
}

/* Badges – corner placement, stacked */
.product-card__badges {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.product-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    background: rgba(107, 114, 128, 0.05);
    border-radius: 2px;
    line-height: 1.2;
}

.product-card__badge-icon {
    color: #6b7280;
    line-height: 1;
    opacity: 0.9;
}

.product-card .card-action {
    display: inline-block;
    margin-top: 12px;
    font-weight: 500;
    color: var(--lionex-primary);
}

.product-card:hover .card-action {
    text-decoration: underline;
}

/* Primary – first line darker accent, descriptor and action match accent */
.product-card--primary {
    border-left-color: var(--lionex-primary);
}

.product-card--primary .product-card__name,
.product-card--primary h3 {
    color: var(--lionex-heading);
}

.product-card--primary .product-card__descriptor,
.product-card--primary .card-action {
    color: var(--lionex-primary-dark);
}

/* Warm accent – first line darker, descriptor and action match accent */
.product-card--downloads {
    border-left-color: #b89b3a;
}

.product-card--downloads .product-card__name,
.product-card--downloads h3 {
    color: #7a6629;
}

.product-card--downloads .product-card__descriptor,
.product-card--downloads .card-action {
    color: #b89b3a;
}

/* Golden accent – first line darker, descriptor and action match accent */
.product-card--red {
    border-left-color: #8a7319;
}

.product-card--red .product-card__name,
.product-card--red h3 {
    color: #5c4e12;
}

.product-card--red .product-card__descriptor,
.product-card--red .card-action {
    color: #8a7319;
}

/* Documents hub card – first line darker, descriptor and action match accent */
.product-card--doc {
    border-left-color: #6b7280;
}

.product-card--doc .product-card__name,
.product-card--doc h3 {
    color: #4b5563;
}

.product-card--doc .product-card__descriptor,
.product-card--doc .card-action {
    color: #6b7280;
}


/* ================================================
   Category Cards (legacy – category pages, product lists)
   ================================================ */
.categories {
    display: flex;
    flex-direction: column;
    gap: 24px;
    scroll-margin-top: 20px;
}

.category-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 0;
    padding: 24px 28px;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
    position: relative;
    border-left: 4px solid var(--lionex-accent);
}

.category-card:hover {
    box-shadow: none;
}

.card-link {
    display: inline-block;
    margin-top: 16px;
    color: #999;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s ease;
    line-height: 1.6;
}

/* Ensure consistent spacing after lists, subcategories, and paragraphs */
.product-list+.card-link,
.subcategory+.card-link,
.card-text>p:last-of-type:not(.note)+.card-link {
    margin-top: 16px;
}

.card-text>p:last-of-type:not(.note) {
    margin-bottom: 10px;
}

.category-card:hover .card-link {
    color: var(--lionex-accent);
}

.card-link:hover,
.card-link:focus {
    color: var(--lionex-accent);
    text-decoration: underline;
}

/* Citations */
.references {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: #333;
    line-height: 1.6;
}

.references-label {
    font-weight: 600;
    color: #333;
    margin-right: 6px;
}

.reference-link {
    color: var(--lionex-accent);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.reference-link:hover {
    color: #006d85;
    text-decoration: underline;
}

.category-card--red .reference-link {
    color: var(--lionex-primary);
}

.category-card--red .reference-link:hover {
    color: var(--lionex-primary-dark);
    text-decoration: underline;
}

/* Card content layout */
.card-content {
    display: flex;
    gap: 24px;
    align-items: stretch;
    margin-top: 0;
    min-height: 200px;
}

.card-text {
    flex: 1;
    min-width: 0;
}

.card-image {
    flex: 0 0 18%;
    max-width: 18%;
    display: block;
    padding-left: 12px;
    position: relative;
    overflow: visible;
}

.card-image img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    background-color: #e0e0e0;
    opacity: 1;
}

.order-button {
    position: absolute;
    bottom: 12px;
    left: calc(50% + 6px);
    transform: translateX(-50%);
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--lionex-heading);
    font-family: inherit;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    z-index: 10;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    backdrop-filter: blur(6px);
}

.order-button:hover,
.order-button:active {
    background-color: rgba(255, 255, 255, 0.98);
}

.order-button:focus-visible {
    outline: 2px solid rgba(0, 91, 159, 0.5);
    outline-offset: 2px;
}

a.order-button {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.category-card h2 {
    margin: 0 0 14px 0;
    font-weight: 600;
    color: var(--lionex-accent);
    line-height: 1.6;
}

.category-card h2 a {
    color: inherit;
    text-decoration: none;
}

.category-card h2 a:hover {
    text-decoration: underline;
}

/* Compact category cards (title-only, fixed height) – e.g. index_test.html */
.categories--compact .card-content {
    height: 75px;
    min-height: 75px;
    overflow: hidden;
}

.categories--compact .card-image img {
    min-height: 75px;
    object-fit: cover;
}

/* Compact cards: link on card, no overlay on image */
.categories--compact .card-image .order-button {
    display: none;
}

.categories--compact .card-text .card-action {
    display: inline-block;
    margin-top: 4px;
    font-weight: 500;
    color: var(--lionex-primary);
    text-decoration: none;
}

.categories--compact .card-text .card-action:hover,
.categories--compact .card-text .card-action:focus {
    text-decoration: underline;
}

.categories--compact .category-card--red .card-text .card-action {
    color: var(--lionex-primary);
}

.category-card>p {
    margin: 0 0 14px 0;
    color: #333;
    line-height: 1.6;
}

/* Subcategories */
.subcategory {
    margin-top: 20px;
    margin-bottom: 10px;
    padding-top: 18px;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.subcategory:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.subcategory h3 {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #333;
}

.subcategory>p {
    margin: 0 0 10px 0;
    color: #333;
    line-height: 1.6;
}

/* Product Lists */
.product-list {
    margin: 0 0 10px 0;
    padding-left: 0;
    color: #333;
    list-style: none;
}

.product-list li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.product-list li:last-child {
    margin-bottom: 0;
}

.product-list strong {
    color: #111;
    font-weight: 600;
}

.product-name {
    color: var(--lionex-accent);
}

/* Body copy: trademark phrases (see assets/js/trademark-bold.js) */
.category-body strong.trademark,
.category-layout__lede strong.trademark,
.intro strong.trademark,
.fact-quote strong.trademark,
.spec-card strong.trademark,
a.trademark-link strong.trademark {
    font-weight: 700;
}

/* Unlinked ® in prose only (linked names use trademark-link rules below) */
.category-body strong.trademark:not(a strong.trademark),
.category-layout__lede strong.trademark:not(a strong.trademark),
.category-layout__section > p strong.trademark:not(a strong.trademark),
.cat-advantages-list strong.trademark:not(a strong.trademark),
.page-footer-notes--category strong.trademark:not(a strong.trademark) {
    color: var(--lionex-text);
}

.category-body strong.product-name {
    color: var(--lionex-text);
    font-weight: 700;
}

.category-body a.trademark-link,
.category-layout__lede a.trademark-link,
.category-layout__overview-cta a.trademark-link,
.category-layout__section > p a.trademark-link,
.cat-advantages-list a.trademark-link,
.category-product-table a.trademark-link,
.product-ordering-list__name a.trademark-link,
.spec-card a.trademark-link,
.references--category a.trademark-link,
.citation-list a.trademark-link,
.page-resources .faq-list dd a.trademark-link {
    color: var(--lionex-primary);
    text-decoration: none;
    font-weight: inherit;
}

/* Product names in prose: bold + primary blue (site convention) */
.category-body a.trademark-link strong.product-name,
.category-layout__lede a.trademark-link strong.product-name,
.category-layout__overview-cta a.trademark-link strong.product-name,
.category-layout__section > p a.trademark-link strong.product-name,
.category-layout__section > p a.trademark-link strong.trademark,
.product-ordering-list__name a.trademark-link strong.product-name,
.product-ordering-list__name a.trademark-link strong.trademark,
.spec-card a.trademark-link strong.product-name,
.cat-advantages-list a.trademark-link strong.trademark,
.category-product-table a.trademark-link strong.trademark,
.category-body a.trademark-link strong.trademark,
.category-layout__lede a.trademark-link strong.trademark,
.category-layout__overview-cta a.trademark-link strong.trademark,
.spec-card a.trademark-link strong.trademark,
.references--category a.trademark-link strong.trademark,
.citation-list a.trademark-link strong.trademark,
.page-resources .faq-list dd a.trademark-link strong.product-name,
.page-resources .faq-list dd a.trademark-link strong.trademark {
    color: var(--lionex-primary);
    font-weight: 700;
}

.category-body a.trademark-link:hover,
.category-body a.trademark-link:focus,
.category-layout__lede a.trademark-link:hover,
.category-layout__lede a.trademark-link:focus,
.category-layout__overview-cta a.trademark-link:hover,
.category-layout__overview-cta a.trademark-link:focus,
.category-layout__section > p a.trademark-link:hover,
.category-layout__section > p a.trademark-link:focus,
.cat-advantages-list a.trademark-link:hover,
.cat-advantages-list a.trademark-link:focus,
.category-product-table a.trademark-link:hover,
.category-product-table a.trademark-link:focus,
.product-ordering-list__name a.trademark-link:hover,
.product-ordering-list__name a.trademark-link:focus,
.spec-card a.trademark-link:hover,
.spec-card a.trademark-link:focus,
.references--category a.trademark-link:hover,
.references--category a.trademark-link:focus,
.citation-list a.trademark-link:hover,
.citation-list a.trademark-link:focus,
.page-resources .faq-list dd a.trademark-link:hover,
.page-resources .faq-list dd a.trademark-link:focus,
.page-resources .faq-list dd a.trademark-link:hover strong.product-name,
.page-resources .faq-list dd a.trademark-link:focus strong.product-name,
.page-resources .faq-list dd a.trademark-link:hover strong.trademark,
.page-resources .faq-list dd a.trademark-link:focus strong.trademark {
    color: var(--lionex-primary-dark);
    text-decoration: none;
}

.category-layout__overview-cta a.prose-link,
.page-product-category .category-layout__lede a.prose-link {
    color: var(--lionex-primary);
}

/* Product names match card colors */
.category-card--red .product-name {
    color: var(--lionex-primary);
}

.category-card--downloads .product-name {
    color: #c9a227;
}

.product-desc {
    display: block;
    color: #333;
    margin-top: 4px;
    line-height: 1.6;
}

.note {
    color: #333;
    margin: 10px 0 10px 0;
}

.note+.card-link {
    margin-top: 16px;
}

/* Downloads card accent */
.category-card--downloads {
    border-left-color: #c9a227;
}

.category-card--downloads h2 {
    color: #8a7119;
}

.category-card--downloads:hover .card-link {
    color: #c9a227;
}

.downloads-list li {
    margin-bottom: 6px;
}

/* Dark blue card accent */
.category-card--red {
    border-left-color: var(--lionex-primary);
}

.category-card--red h2 {
    color: var(--lionex-primary);
}

.category-card--red:hover .card-link {
    color: var(--lionex-primary);
}

/* ================================================
   Why Choose Lionex
   ================================================ */
.why-lionex {
    margin-top: 30px;
    padding: 28px 24px;
    background: #fff;
    border-radius: 0;
}

.why-lionex h2 {
    margin: 0 0 12px 0;
    font-weight: 600;
    color: var(--lionex-primary);
    text-align: center;
}

.benefits-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.benefit-card {
    text-align: center;
    padding: 20px 16px;
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s ease;
    min-width: 0;
}

.benefit-card:hover {
    border-bottom-color: rgba(0, 91, 159, 0.2);
}

.benefit-icon-large {
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    max-height: 40px;
    margin: 0 auto 12px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.benefit-icon-large svg {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-shrink: 0;
    object-fit: contain;
}

.benefit-card h3 {
    margin: 0 0 6px 0;
    font-weight: 600;
    color: #333;
}

.benefit-card p {
    margin: 0;
    color: #666;
    line-height: 1.6;
}

/* ================================================
   Contact Section
   ================================================ */
.contact-section {
    margin-top: 20px;
    padding: 20px 20px;
    background: #eef2f7;
    border-radius: 0;
    border: 1px solid rgba(0, 91, 159, 0.25);
    border-left: 6px solid var(--lionex-primary);
    text-align: center;
    scroll-margin-top: 20px;
}

.contact-section h2 {
    margin: 0 0 14px 0;
    font-weight: 700;
    color: var(--lionex-primary-dark);
    letter-spacing: -0.3px;
}

.contact-section>p {
    margin: 0 0 24px 0;
    color: #333;
}

.contact-section .contact-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.contact-section .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-section .contact-label {
    font-weight: 600;
    color: #333;
}

.contact-section .contact-item a {
    color: var(--lionex-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.contact-section .contact-item a:hover,
.contact-section .contact-item a:focus {
    text-decoration: underline;
}

/* Product contact form – wrapper only (no card); form block has the blue fill */
/* Form uses full container width like original contact-section */
.product-contact-form-wrapper {
    margin-top: 20px;
    scroll-margin-top: 20px;
}

.product-contact-form-wrapper .home-contact-grid--single {
    max-width: 100%;
}

.product-contact-form-wrapper .home-contact-form-block .product-contact-form__title {
    margin: 0 0 8px 0;
    font-weight: 700;
    color: var(--lionex-heading);
}

.product-contact-form-wrapper .home-contact-form-block .product-contact-form__title + p {
    margin: 0 0 20px 0;
    color: var(--lionex-text-secondary);
    line-height: 1.5;
}

.product-contact-form-wrapper .home-contact-form-block a {
    color: var(--lionex-primary);
    text-decoration: none;
}

.product-contact-form-wrapper .home-contact-form-block a:hover {
    text-decoration: underline;
}


/* ================================================
   Product section blocks (category subsection includes)
   ================================================ */
.product-section {
    margin-bottom: 48px;
}

.product-section:last-of-type {
    margin-bottom: 0;
}

/* Category body – plain body text in main */
/* Page TOC – inline label + pills; no outer box / fill */
.page-toc {
    width: fit-content;
    max-width: 100%;
    margin-bottom: var(--lionex-space-6);
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    color: var(--lionex-text-secondary);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.page-toc__pills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Pill links: site-base.css (.page-toc__pills a, .page-toc > a) */

@media (max-width: 768px) {
    .page-toc {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0;
    }

    .page-toc__pills {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
}

.category-body {
    margin: 0 0 24px 0;
}

.category-body p {
    margin: 0 0 1em 0;
    line-height: 1.6;
    color: var(--lionex-text);
}

.category-body a {
    text-decoration: none;
}

.category-body a:hover,
.category-body a:focus {
    text-decoration: underline;
}

.category-body__link {
    display: inline-block;
    font-weight: 500;
    text-decoration: none;
}

.category-body p .category-body__link {
    font-size: inherit;
}

.category-body__link:hover,
.category-body__link:focus {
    text-decoration: underline;
}

.category-body p:last-child {
    margin-bottom: 0;
}

.category-body--compact {
    margin-bottom: 16px;
}

.category-body--compact p {
    margin-bottom: 0;
}

.category-product-table {
    margin-top: 16px;
    margin-bottom: 32px;
    border-collapse: collapse;
}

.category-product-table th,
.category-product-table td {
    padding: 6px 12px;
    text-align: left;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.category-product-table th {
    font-weight: 600;
    background: transparent;
}

.category-product-table thead th {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.category-product-table tbody tr:last-child td,
.category-product-table tbody tr:last-child th {
    border-bottom: none;
}

.category-product-table a {
    color: var(--lionex-primary);
    text-decoration: none;
}

.category-product-table a:hover {
    text-decoration: underline;
}

.category-product-table__link {
    text-align: right;
    white-space: nowrap;
}

.category-product-table__link a {
    color: var(--lionex-primary);
    text-decoration: none;
}

.category-body__title {
    margin: 1.5em 0 0.5em 0;
    font-weight: 700;
    color: var(--lionex-primary-dark);
    line-height: 1.3;
}

.category-body__subheading {
    margin: 1.5em 0 0.5em 0;
    font-weight: 600;
    color: var(--lionex-text-secondary);
}

.category-body__subheading + .category-features-list {
    margin-top: 0;
}

/* Category CTA */
.category-cta {
    margin: 24px 0 32px 0;
}

.category-cta__button {
    display: inline-block;
    padding: 14px 28px;
    background-color: var(--lionex-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: 0;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.category-cta__button:hover,
.category-cta__button:focus {
    background-color: var(--lionex-primary-dark);
    color: #fff;
}

/* References – category pages (no top rule: a full-width line reads like “next product” break) */
.references.references--category {
    --references-category-gap-after: var(--lionex-space-10, 40px);
    margin-top: 12px;
    margin-bottom: 0;
    /* Gap after block is padding only — left accent is ::before so it doesn’t run through empty space */
    padding: 4px 0 var(--references-category-gap-after) 16px;
    border-top: none;
    border-left: none;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    position: relative;
}

.references.references--category::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: var(--references-category-gap-after);
    width: 3px;
    background: rgba(0, 110, 183, 0.28);
    border-radius: 1px;
}

.references--category .references__title {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: var(--lionex-text-secondary);
}

.references--category p {
    margin: 0;
    line-height: 1.6;
}

.references--category .references__followup {
    margin-top: 1rem;
    color: var(--lionex-intro-text, #333);
}

.references--category .citation-list {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.6;
    color: #333;
}

.references--category .citation-list li {
    margin-bottom: 0.75rem;
}

.references--category .citation-list li:last-child {
    margin-bottom: 0;
}

.references--category .citation-list a {
    color: var(--lionex-accent);
    text-decoration: none;
}

.references--category .citation-list a:hover {
    color: #006d85;
    text-decoration: underline;
}

.references--category .citation-list .citation-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 0.35rem;
    white-space: nowrap;
}

.references--category .citation-list .citation-pdf-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .category-cta__button {
        padding: 12px 24px;
    }
}

/* ================================================
   Footer note – products landing & category pages
   ================================================ */
.page-footer-notes {
    margin-top: 24px;
    padding-top: 0;
    text-align: center;
}

.page-footer-notes .footer-note {
    margin: 0;
    font-weight: 400;
    color: var(--lionex-text-muted);
}
.page-footer-notes .footer-note a {
    color: var(--lionex-primary);
    text-decoration: none;
}
.page-footer-notes .footer-note a:hover,
.page-footer-notes .footer-note a:focus {
    text-decoration: underline;
}

.page-footer-notes--category {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}

/* Footnotes inside category-layout (e.g. Research Products disclaimers) */
.page-product-category .category-layout > .page-footer-notes--category {
    margin-top: var(--lionex-space-5);
    margin-bottom: 0;
    padding-top: var(--lionex-space-3);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.page-product-category .category-layout > .category-layout__section:has(+ .page-footer-notes--category) {
    padding-bottom: var(--lionex-space-4);
}

.page-footer-notes--category .footer-note {
    max-width: 52rem;
    line-height: 1.6;
}

.page-product-category .category-layout > .page-footer-notes--category .footer-note {
    font-size: 0.875rem;
    line-height: 1.5;
}

.page-product-category .category-layout__section > h2 sup {
    margin-left: 0.1em;
    font-size: 0.5em;
    vertical-align: super;
    line-height: 0;
    font-weight: 600;
}

.page-product-category .category-layout__section > h2 sup:first-of-type {
    margin-left: 0.2em;
}

.footer-notes-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 52rem;
}

.footer-notes-list .footer-note {
    margin: 0 0 12px 0;
    padding: 0 0 0 1.75rem;
    position: relative;
    scroll-margin-top: 96px;
    text-align: left;
    font-weight: 400;
    color: var(--lionex-text-muted);
    line-height: 1.6;
}

.footer-notes-list .footer-note:last-child {
    margin-bottom: 0;
}

.footer-notes-list__label {
    position: absolute;
    left: 0;
    font-weight: 400;
    color: var(--lionex-text-muted);
}

.footer-notes-list .reference-link {
    color: var(--lionex-primary);
    text-decoration: none;
}

.footer-notes-list .reference-link:hover,
.footer-notes-list .reference-link:focus {
    text-decoration: underline;
}

/* Category disclaimers: same blue as reference links, not bold product-name prose */
.page-footer-notes--category a.trademark-link {
    color: var(--lionex-primary);
    font-weight: 400;
    text-decoration: none;
}

.page-footer-notes--category a.trademark-link strong.trademark {
    color: inherit;
    font-weight: 400;
}

.page-footer-notes--category a.trademark-link:hover,
.page-footer-notes--category a.trademark-link:focus {
    color: var(--lionex-primary);
    text-decoration: none;
}

.page-product-category a.footnote-ref {
    font-weight: 600;
    color: var(--lionex-primary);
    text-decoration: none;
}

.page-product-category sup {
    line-height: 0;
    vertical-align: baseline;
    position: relative;
    top: -0.35em;
    font-size: 0.75em;
}

.page-product-category sup a.footnote-ref {
    vertical-align: baseline;
    line-height: 1;
}

.page-product-category a.footnote-ref--alpha {
    font-size: 1em;
    letter-spacing: 0.02em;
}

.footer-notes-list--alpha {
    list-style: none;
}

.page-product-category a.footnote-ref:hover,
.page-product-category a.footnote-ref:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ================================================
   Footer
   ================================================ */
/* Footer styles in site-base.css (.site-footer) */

/* ================================================
   Responsive
   ================================================ */
@media (max-width: 768px) {
    .container {
        padding: 16px;
    }

    .category-card {
        padding: 20px;
    }

    .card-content {
        flex-direction: column;
        gap: 16px;
        min-height: auto;
    }

    .card-image {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        padding-left: 0;
        padding-top: 8px;
    }

    .card-image img {
        min-height: 150px;
        max-height: 200px;
    }

    .categories--compact .card-content {
        height: 75px;
        min-height: 75px;
        overflow: hidden;
    }

    .categories--compact .card-image img {
        min-height: 75px;
        max-height: 75px;
        object-fit: cover;
    }

    .order-button {
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
        max-width: calc(100% - 16px);
    }

    .card-link {
        margin-top: 12px;
    }

    .why-lionex {
        padding: 24px 20px;
    }

    .benefits-grid-cards {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }

    .benefit-card {
        padding: 16px 12px;
    }

    .contact-section {
        padding: 16px;
        scroll-margin-top: 16px;
    }

    .contact-section .contact-grid {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 12px;
        min-height: auto;
    }

    .category-card {
        padding: 16px;
    }

    .card-content {
        gap: 12px;
    }

    .card-image img {
        min-height: 120px;
        max-height: 150px;
    }

    .categories--compact .card-content {
        height: 75px;
        min-height: 75px;
    }

    .categories--compact .card-image img {
        min-height: 75px;
        max-height: 75px;
        object-fit: cover;
    }

    .order-button {
        padding: 6px 10px;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
    }

    .card-link {
        margin-top: 10px;
    }

    .references {
        margin-top: 16px;
        padding-top: 12px;
    }

    .why-lionex {
        padding: 20px 16px;
    }

    .benefits-grid-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .benefit-card {
        padding: 14px 10px;
    }

    .benefit-icon-large {
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
    }

    .contact-section {
        padding: 14px;
        scroll-margin-top: 12px;
    }
}

/* Suppress card style only on products/xyz category level (not index, not product detail) */
.page-products-category .category-card,
.page-products-category .category-card--red {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.page-products-category .category-card:hover,
.page-products-category .category-card--red:hover {
    box-shadow: none !important;
}

.page-products-category .category-card .card-content {
    min-height: auto;
}

.page-products-category .category-card .card-image {
    background-color: transparent;
}

/* More visible product link on category level */
.page-products-category .category-card h2 a {
    color: var(--lionex-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-products-category .category-card h2 a:hover,
.page-products-category .category-card h2 a:focus {
    color: var(--lionex-primary-dark);
    text-decoration-thickness: 2px;
}

.page-products-category .category-card .order-button {
    padding: 12px 24px;
    background-color: var(--lionex-primary);
    color: #fff !important;
    font-weight: 600;
    border: none;
}

.page-products-category .category-card .order-button:hover,
.page-products-category .category-card .order-button:focus,
.page-products-category .category-card .order-button:active {
    background-color: var(--lionex-primary-dark);
}

/* Replace teal with blue on category level */
.page-products-category .category-card h2,
.page-products-category .category-card h2 a {
    color: var(--lionex-primary);
}

.page-products-category .category-card .card-link,
.page-products-category .category-card:hover .card-link {
    color: var(--lionex-primary);
}

.page-products-category .category-card .card-link:hover,
.page-products-category .category-card .card-link:focus {
    color: var(--lionex-primary-dark);
}

.page-products-category .category-card .reference-link {
    color: var(--lionex-primary);
}

.page-products-category .category-card .reference-link:hover {
    color: var(--lionex-primary-dark);
}

.page-products-category .product-name {
    color: var(--lionex-primary);
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================
   Fact quote / pullquote
   ================================================ */
.fact-quote {
    margin: 28px 0;
    padding: 24px 28px 20px;
    background: linear-gradient(135deg, #f0f6fb 0%, #eaf1f8 100%);
    border-left: 5px solid var(--lionex-primary);
    border-radius: 0 6px 6px 0;
    position: relative;
}

.fact-quote::before {
    content: "\201C";
    position: absolute;
    top: 10px;
    left: 14px;
    line-height: 1;
    color: var(--lionex-primary);
    opacity: 0.18;
    font-family: Georgia, serif;
    pointer-events: none;
}

/* Compact overlay / in-flow cards: no giant decorative quote (avoids bleed over header) */
.fact-quote--hero-overlay::before {
    content: none;
    display: none;
}

.fact-quote p {
    margin: 0;
    line-height: 1.6;
    color: var(--lionex-text);
    padding-left: 20px;
}

.fact-quote p strong {
    color: var(--lionex-primary-dark);
}

.fact-quote cite {
    display: block;
    margin-top: 10px;
    padding-left: 20px;
    font-style: normal;
    color: var(--lionex-text-muted);
}

.fact-quote cite a {
    color: var(--lionex-primary);
    text-decoration: none;
}

.fact-quote cite a:hover {
    text-decoration: underline;
}

/* Fact quote panel over page hero image (rapid-tests) */
.page-hero--fact-overlay .fact-quote--hero-overlay {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
    left: 20px;
    margin: 0;
    max-width: 26rem;
    margin-left: auto;
    padding: 18px 22px 14px;
}

.page-hero--fact-overlay .fact-quote--hero-overlay p {
    line-height: 1.55;
    padding-left: 18px;
}

.page-hero--fact-overlay .fact-quote--hero-overlay cite {
    padding-left: 18px;
}

@media (max-width: 640px) {
    .page-hero--fact-overlay .fact-quote--hero-overlay {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
        margin-left: 0;
        padding: 14px 16px 12px;
    }
}

/* Quote card (in-flow + hero overlay): grey type/bar only, no tinted fill */
.fact-quote--hero-overlay {
    background: #fff;
    border-left: 5px solid #8b95a3;
    border-radius: 0 6px 6px 0;
}

.fact-quote--hero-overlay p {
    color: var(--lionex-text-secondary);
}

.fact-quote--hero-overlay p strong {
    color: #4a5568;
    font-weight: 700;
}

.fact-quote--hero-overlay cite {
    color: var(--lionex-text-light);
}

.fact-quote--hero-overlay cite a:link,
.fact-quote--hero-overlay cite a:visited {
    color: #5c6773;
    text-decoration: none;
}

.fact-quote--hero-overlay cite a:hover,
.fact-quote--hero-overlay cite a:focus {
    color: var(--lionex-text-secondary);
    text-decoration: underline;
}

/* Same quote card in main content (rapid-tests IVD) */
.category-body .fact-quote--hero-overlay {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    max-width: none;
    margin: 0;
    margin-left: 0;
    padding: 18px 22px 14px;
}

.category-body .fact-quote--hero-overlay p {
    line-height: 1.55;
    padding-left: 18px;
}

.category-body .fact-quote--hero-overlay cite {
    padding-left: 18px;
}

/* In-flow TB fact (IVD intro): no left accent bar; typographic quotes in markup */
.page-product-category .cat-product-detail-intro .fact-quote--in-flow {
    border-left: none;
    border-radius: 6px;
    padding: 16px 18px 12px;
}

.page-product-category .cat-product-detail-intro .fact-quote--in-flow p,
.page-product-category .cat-product-detail-intro .fact-quote--in-flow cite {
    padding-left: 0;
}
