:root {
    /* Brand - overridden inline by index.php from template params */
    --af-primary:        #1473e6;
    --af-primary-hover:  #0d66d0;
    --af-primary-active: #095aba;
    --af-dark:           #161616;

    /* Light surface palette */
    --af-bg:            #ffffff;
    --af-bg-soft:       #fafafa;
    --af-bg-muted:      #f5f5f5;
    --af-bg-hover:      #f0f0f0;
    --af-surface:       #ffffff;
    --af-border:        #eaeaea;
    --af-border-strong: #d3d3d3;
    --af-divider:       #f0f0f0;

    --af-text:        #2c2c2c;
    --af-text-strong: var(--af-dark);
    --af-text-soft:   #6e6e6e;
    --af-text-muted:  #909090;
    --af-link:        var(--af-primary);

    /* Accent feedback */
    --af-success: #2ea043;
    --af-warning: #d97706;
    --af-danger:  #dc2626;

    /* Adobe rarely uses shadows - hairline borders carry the structure */
    --af-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --af-shadow-md: 0 2px 6px rgba(0,0,0,.06);
    --af-shadow-lg: 0 4px 16px rgba(0,0,0,.08);

    /* Typography */
    --af-font-sans: 'Source Sans 3', 'Source Sans Pro', 'adobe-clean', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --af-font-display: var(--af-font-sans);
    --af-font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Layout */
    --af-container:      1480px;
    --af-container-wide: 1680px;
    --af-radius-sm: 2px;
    --af-radius:    3px;
    --af-radius-lg: 4px;
    --af-radius-pill: 999px;
    --af-header-h:  64px;
    --af-filter-h:  56px;

    /* Motion */
    --af-ease: cubic-bezier(.4,0,.2,1);
    --af-dur:  .15s;
}







*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: #ffffff;
    color: #2c2c2c;
    font-family: 'Source Sans 3', 'Source Sans Pro', 'adobe-clean', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: #1473e6; text-decoration: none; transition: color .15s; }
a:hover { color: #0d66d0; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Source Sans 3', 'Source Sans Pro', 'adobe-clean', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    color: #161616;
    line-height: 1.15;
    margin: 0 0 .6em;
    letter-spacing: -.01em;
}
h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); letter-spacing: -.025em; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 1em; }

::selection { background: rgba(20,115,230,.25); }

.skip-link {
    position: absolute; top: -48px; left: 8px;
    background: #161616; color: #fff;
    padding: 8px 14px; border-radius: 3px;
    z-index: 1000; font-weight: 600;
    transition: top .15s;
}
.skip-link:focus { top: 8px; outline: none; }

:focus-visible {
    outline: 2px solid #1473e6;
    outline-offset: 1px;
    border-radius: 2px;
}

/* =========================================================================
   1. Creative Cloud strip
   ========================================================================= */
.cc-bar {
    background: #1d1d1d;
    color: #d8d8d8;
    border-bottom: 1px solid #000;
    font-size: 12px;
    height: 32px;
}
.cc-bar a { color: #d8d8d8; }
.cc-bar a:hover { color: #fff; text-decoration: none; }
.cc-bar__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 100%;
    padding: 0 clamp(16px, 2vw, 32px);
    gap: 16px;
    max-width: 100%;
}
.cc-bar__left, .cc-bar__right {
    display: inline-flex; align-items: center; gap: 16px;
}
.cc-bar ul { list-style: none; padding: 0; margin: 0; display: inline-flex; gap: 14px; }

/* =========================================================================
   2. Brand bar (Adobe Fonts header)
   ========================================================================= */
.brand-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
    border-bottom: 1px solid #e1e1e1;
    transition: box-shadow var(--af-dur), border-color var(--af-dur);
}
.brand-bar.is-stuck {
    border-bottom-color: #c8c8c8;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.brand-bar__inner {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    height: 64px;
    padding: 0 clamp(16px, 2vw, 32px);
    gap: clamp(12px, 2vw, 32px);
}

/* Brand logo - Adobe red square mark + brand word */
.brand {
    display: inline-flex; align-items: center; gap: 10px;
    color: #161616;
    text-decoration: none;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; color: #161616; }
.brand-mark {
    display: inline-block;
    width: 28px; height: 28px;
    background: #fa0f00;
    border-radius: 2px;
    position: relative;
    flex: 0 0 28px;
}
.brand-mark::after {
    content: 'Aa';
    position: absolute; inset: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 28px;
    text-align: center;
    letter-spacing: -.02em;
}
.brand-word { color: #161616; }
.brand-logo { height: 32px; width: auto; }

/* Mobile toggle */
.brand-bar__toggle {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    background: transparent; border: 0;
    color: #161616;
}
.brand-bar__toggle span {
    display: block; width: 18px; height: 2px;
    background: currentColor;
    transition: transform .15s, opacity .15s;
}
.brand-bar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.brand-bar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.brand-bar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Brand nav - Adobe-style underline links */
.brand-nav { justify-self: start; }
.brand-nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; gap: 0;
}
.brand-nav a {
    display: inline-flex; align-items: center;
    color: #2c2c2c;
    padding: 8px 14px;
    font-size: 14px; font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: color .15s;
}
.brand-nav a::after {
    content: ''; position: absolute;
    left: 14px; right: 14px; bottom: -1px;
    height: 2px; background: transparent;
    transition: background-color .15s;
}
.brand-nav a:hover { color: #161616; text-decoration: none; }
.brand-nav a:hover::after { background: #161616; }
.brand-nav .current > a,
.brand-nav .active > a,
.brand-nav a.active {
    color: #161616; font-weight: 700;
}
.brand-nav .current > a::after,
.brand-nav .active > a::after,
.brand-nav a.active::after { background: #fa0f00; }

/* Brand utility (search, account, theme toggle) */
.brand-utility {
    justify-self: end;
    display: inline-flex; align-items: center; gap: 8px;
}
.brand-utility input[type="search"],
.brand-utility input[type="text"] {
    background: #f5f5f5;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 8px 14px 8px 38px;
    font: inherit; font-size: 13px;
    color: #2c2c2c;
    min-width: 240px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat; background-position: 12px center; background-size: 14px;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.brand-utility input::placeholder { color: #909090; }
.brand-utility input:focus {
    outline: none;
    /*background-color: #ffffff;
    border-color: #1473e6;
    box-shadow: 0 0 0 3px rgba(20,115,230,.18);*/
}

.theme-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    border-radius: 3px;
    color: #2c2c2c;
    transition: background-color .15s, color .15s;
}
.theme-btn:hover { background: #f5f5f5; color: #161616; }
.theme-btn .i-moon { display: none; }
html[data-theme="dark"] .theme-btn .i-sun  { display: none; }
html[data-theme="dark"] .theme-btn .i-moon { display: block; }
html[data-theme="light"] .theme-btn .i-sun  { display: block; }
html[data-theme="light"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .theme-btn .i-sun  { display: none; }
    html:not([data-theme]) .theme-btn .i-moon { display: block; }
}

.nav-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 40;
    opacity: 0; pointer-events: none;
    transition: opacity .15s;
}
.nav-overlay.is-active { opacity: 1; pointer-events: auto; }

/* =========================================================================
   3. Hero (homepage)
   ========================================================================= */
.af-hero {
    background: #ffffff;
    border-bottom: 1px solid #e1e1e1;
    padding: clamp(64px, 10vw, 120px) 0;
}
.af-hero__inner {
    max-width: var(--af-container);
    margin-inline: auto;
    padding-inline: clamp(20px, 3vw, 40px);
}
.af-hero h1 {
    font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    margin: 0 0 16px;
}
.af-hero p {
    color: #6e6e6e;
    font-size: clamp(1rem, .85rem + .6vw, 1.25rem);
    max-width: 60ch; margin: 0 0 28px;
}

/* =========================================================================
 categories_list (homepage)
   ========================================================================= */
.categories_list {
    padding: clamp(64px, 10vw, 80px) 0;
}
.categories_list__inner {
    margin-inline: auto;
    padding-inline: clamp(20px, 3vw, 40px);
}


/* =========================================================================
   4. Main layout (rail + grid area)
   ========================================================================= */
.af-main { padding: 24px 0 64px; }
.af-main__inner {
    display: grid;
    gap: clamp(24px, 3vw, 40px);
    margin-inline: auto;
    padding-inline: clamp(20px, 3vw, 40px);
}
.af-site.has-rail .af-main__inner { grid-template-columns: 320px 1fr; }
.af-site.no-rail .af-main__inner  { grid-template-columns: 1fr; }

/* Filter rail */
.filter-rail {
    align-self: start;
    position: sticky;
    top: calc(64px + 16px);
/*    max-height: calc(100vh - var(--af-brand-h) - 32px);*/
    overflow: auto;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 8px 4px 8px 16px;
}
.filter-rail__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px 8px 0;
}
.filter-rail__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6e6e6e;
    margin: 0;
}
.filter-rail__close {
    display: none;
    background: transparent; border: 0;
    color: #2c2c2c; font-size: 22px;
    width: 32px; height: 32px;
    border-radius: 3px;
}
.filter-rail__close:hover { background: #f5f5f5; color: #161616; }
.filter-rail__body { padding-right: 12px; }

/* Filter rail modules - flat groups divided by hairlines */
.filter-rail .moduletable,
.filter-rail .module {
    background: transparent;
    border: 0; padding: 14px 0;
    margin: 0;
    border-bottom: 1px solid #ededed;
}
.filter-rail .moduletable:last-child,
.filter-rail .module:last-child { border-bottom: 0; }
.filter-rail h3 {
    font-size: 13px; font-weight: 700;
    color: #161616;
    margin: 0 0 10px;
    letter-spacing: 0;
    text-transform: none;
    display: flex; align-items: center; justify-content: space-between;
}
.filter-rail ul { list-style: none; padding: 0; margin: 0; }
.filter-rail li { margin: 0; }
.filter-rail a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 0;
    color: #2c2c2c;
    font-size: 13px;
    text-decoration: none;
}
.filter-rail a:hover { color: #1473e6; text-decoration: none; }
.filter-rail .current > a,
.filter-rail .active > a,
.filter-rail a.active {
    color: #161616;
    font-weight: 700;
}
.filter-rail input[type="checkbox"],
.filter-rail input[type="radio"] {
    width: 14px; height: 14px;
    margin-right: 8px;
    accent-color: #1473e6;
}

/* =========================================================================
   5. Grid area (chip row + toolbar + content)
   ========================================================================= */
.grid-area { min-width: 0; }

.grid-utilities {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 8px 0;
    border-bottom: 1px solid #ededed;
}
.grid-utilities--minimal { padding-bottom: 4px; border-bottom: 0; }

.rail-toggle {
    display: inline-flex;
    align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid #c8c8c8;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px; font-weight: 600;
    color: #2c2c2c;
}
.rail-toggle:hover { background: #f5f5f5; color: #161616; }
.rail-toggle[aria-pressed="true"] {
    background: #f5f5f5;
    border-color: #c8c8c8;
    color: #161616;
}
.rail-toggle .rail-toggle__on  { display: none; }
.rail-toggle[aria-pressed="true"] .rail-toggle__off { display: none; }
.rail-toggle[aria-pressed="true"] .rail-toggle__on  { display: inline; }

/* Desktop: when admin/user collapses the rail, hide it and let grid stretch */
.af-site.has-rail.rail-collapsed .filter-rail { display: none; }
.af-site.has-rail.rail-collapsed .af-main__inner { grid-template-columns: 1fr; }

/* Filter chips */
.filter-chips {
    flex: 1 1 auto;
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    min-height: 32px;
}
.filter-chips a, .filter-chips .chip, .filter-chips button {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f5f5f5;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 10px 4px 12px;
    font-size: 12px; font-weight: 600;
    color: #2c2c2c;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.filter-chips a::after,
.filter-chips .chip::after,
.filter-chips button::after {
    content: '\00d7';
    font-size: 14px; font-weight: 700; line-height: 1;
    color: #6e6e6e;
}
.filter-chips a:hover, .filter-chips .chip:hover, .filter-chips button:hover {
    background: #efefef; color: #161616; text-decoration: none;
}

/* Grid toolbar (sort dropdown, view density) */
.grid-toolbar {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px;
}
.grid-toolbar select, .grid-toolbar button {
    background: #ffffff;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 13px; font-weight: 600;
    color: #2c2c2c;
}
.grid-toolbar select:hover, .grid-toolbar button:hover {
    border-color: #6e6e6e;
    color: #161616;
}

.content { min-width: 0; }
.content-top, .content-bottom { margin: 0 0 24px; }
.content-bottom { margin: 24px 0 0; }

/* =========================================================================
   6. Modules (generic, when not in a specific zone)
   ========================================================================= */
.moduletable, .module {
    background: transparent;
    border: 0; padding: 0;
    margin-bottom: 28px;
    box-shadow: none;
}


/* =========================================================================
   7. Buttons
   ========================================================================= */
.btn, .button, button.btn-primary, .btn-primary, input[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #161616; color: #fff;
    border: 1px solid #161616;
    border-radius: 3px;
    padding: 10px 22px;
    font-weight: 700; font-size: 13px;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover, .btn-primary:hover, input[type="submit"]:hover {
    background: #000; color: #fff; text-decoration: none;
}
.btn-cta {
    background: #1473e6; border-color: #1473e6; color: #fff;
}
.btn-cta:hover {
    background: #0d66d0; border-color: #0d66d0; color: #fff;
}
.btn-ghost {
    background: transparent; color: #2c2c2c; border-color: #c8c8c8;
}
.btn-ghost:hover {
    background: #f5f5f5; color: #161616; border-color: #6e6e6e;
}

/* =========================================================================
   8. Forms
   ========================================================================= */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="url"], input[type="tel"], textarea, select {
    width: 100%;
    background: #ffffff;
    color: #2c2c2c;
    /*border: 1px solid #c8c8c8;*/
    border-radius: 3px;
    padding: 9px 12px;
    font: inherit; font-size: 14px;
    /*transition: border-color .15s, box-shadow .15s;*/
}
input:focus, textarea:focus, select:focus {
    outline: none;    
}
label {
    font-weight: 600; color: #2c2c2c;
    display: inline-block; margin-bottom: 6px; font-size: 13px;
}

/* =========================================================================
   9. Tables / pre / code
   ========================================================================= */
.content table {
    width: 100%; border-collapse: collapse;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}
.content th, .content td {
    padding: 12px 14px; text-align: left;
    border-bottom: 1px solid #ededed;
}
.content th {
    background: transparent; color: #6e6e6e;
    font-weight: 700; font-size: 12px;
    text-transform: uppercase; letter-spacing: .06em;
}
.content tr:last-child td { border-bottom: 0; }

pre, code, kbd {
    font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #f5f5f5;
    border-radius: 2px;
}
code { padding: 2px 6px; font-size: .92em; }
pre  { padding: 14px 16px; overflow-x: auto; border: 1px solid #e1e1e1; }

/* =========================================================================
   10. Articles
   ========================================================================= */

.article-info {
    display: flex; flex-wrap: wrap; gap: 14px;
    color: #909090;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 24px;
}

/* =========================================================================
   11. Pagination
   ========================================================================= */
.pagination, ul.pagination {
    display: flex; gap: 2px; flex-wrap: wrap;
    list-style: none; padding: 0; margin: 32px 0 0;
    justify-content: center;
}
.pagination a, .pagination span, .pagination li > * {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border-radius: 2px;
    color: #2c2c2c;
    font-weight: 600; font-size: 13px;
    text-decoration: none;
    border: 1px solid transparent;
}
.pagination a:hover { background: #f5f5f5; color: #161616; text-decoration: none; }
.pagination .active > *,
.pagination li.active > * {
    background: #161616; color: #fff;
    border-color: #161616;
}

/* =========================================================================
   12. System messages
   ========================================================================= */
#system-message-container { margin: 16px 0; }
.alert, #system-message > div {
    background: #ffffff;
    border: 1px solid #c8c8c8;
    border-left: 3px solid #1473e6;
    border-radius: 3px;
    padding: 12px 16px;
    color: #2c2c2c;
    font-size: 13px;
}
.alert-success { border-left-color: #2ea043; }
.alert-warning, .alert-notice { border-left-color: #d97706; }
.alert-error, .alert-danger   { border-left-color: #dc2626; }

/* =========================================================================
   13. Footer
   ========================================================================= */
.af-footer {
    background: #161616;
    color: #b4b4b4;
    margin-top: 80px;
    border-top: 1px solid #000;
    font-size: 13px;
}
.af-footer a { color: #ececec; text-decoration: none; }
.af-footer a:hover { color: #fff; text-decoration: underline; }

.af-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    padding: 56px clamp(16px, 2vw, 32px) 32px;
    max-width: 1480px;
    margin-inline: auto;
}
.af-footer__cols h3 {
    color: #fff;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    margin: 0 0 14px;
}
.af-footer__cols ul { list-style: none; padding: 0; margin: 0; }
.af-footer__cols li { margin: 0 0 8px; }

.af-footer__bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    border-top: 1px solid #2a2a2a;
    padding: 18px clamp(16px, 2vw, 32px);
    max-width: 1480px;
    margin-inline: auto;
    font-size: 12px;
}
.af-copy { margin: 0; }

/* =========================================================================
   14. Error / offline
   ========================================================================= */
.af-error, .af-offline {
    background: #ffffff;
    color: #2c2c2c;
    font-family: 'Source Sans 3', 'Source Sans Pro', 'adobe-clean', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
}
.af-error__wrap {
    min-height: 100vh;
    display: grid; place-items: center; gap: 16px;
    padding: 40px 16px;
    text-align: center;
}
.af-error__code {
    font-size: clamp(80px, 16vw, 160px);
    font-weight: 800;
    line-height: 1; margin: 0;
    color: #161616;
    letter-spacing: -.04em;
}
.af-error__title {
    font-size: 1.5rem;
    margin: 0;
    color: #2c2c2c;
    font-weight: 600;
}
.af-offline__form {
    display: grid; gap: 12px;
    max-width: 320px; margin: 16px auto 0;
    text-align: left;
}

/* =========================================================================
   15. Component-only
   ========================================================================= */
.af-component { background: #ffffff; }
.af-component__main {
    padding: 24px clamp(16px, 2vw, 32px);
    max-width: 1480px;
    margin-inline: auto;
}

/* =========================================================================
   16. Responsive
   ========================================================================= */
@media (max-width: 1024px) {
    :root { --af-rail-w: 240px; } /* Note: CSS variable kept for responsive override */
}

@media (max-width: 860px) {
    .cc-bar { display: none; }
    .brand-bar__toggle { display: inline-flex; }
    .brand-bar__inner { grid-template-columns: auto 1fr auto; }
    .brand-bar__toggle { order: 2; justify-self: end; }
    .brand-utility { order: 3; }
    .brand-utility input[type="search"], .brand-utility input[type="text"] { display: none; }

    .brand-nav {
        position: fixed; top: 0; right: -100%;
        width: min(320px, 86vw); height: 100vh;
        background: #ffffff;
        border-left: 1px solid #e1e1e1;
        padding: 76px 24px 24px;
        z-index: 60;
        overflow-y: auto;
        transition: right .15s cubic-bezier(.4,0,.2,1);
        box-shadow: 0 0 32px rgba(0,0,0,.25);
        justify-self: stretch;
        order: 4;
    }
    .brand-nav.is-open { right: 0; }
    .brand-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .brand-nav li { border-bottom: 1px solid #ededed; }
    .brand-nav a { padding: 14px 0; }
    .brand-nav a::after { display: none; }

    .af-site.has-rail .af-main__inner { grid-template-columns: 1fr; }
    .filter-rail {
        position: fixed;
        top: 0; left: -100%;
        width: min(320px, 86vw); height: 100vh;
        max-height: none;
        z-index: 60;
        border-radius: 0;
        border: 0; border-right: 1px solid #e1e1e1;
        padding: 16px 16px 24px;
        overflow-y: auto;
        transition: left .15s cubic-bezier(.4,0,.2,1);
        box-shadow: 0 0 32px rgba(0,0,0,.25);
    }
    .filter-rail.is-open { left: 0; }
    .filter-rail__close { display: inline-flex; }
    .rail-toggle { display: inline-flex; }
}

@media (max-width: 480px) {
    body { font-size: 13px; }
    .brand-bar__inner { padding: 0 12px; }
    .af-main__inner { padding-inline: 12px; }
}

/* =========================================================================
   17. Reduced motion + print
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .cc-bar, .brand-bar, .filter-rail, .grid-utilities, .af-footer,
    .nav-overlay, .theme-btn, .rail-toggle { display: none !important; }
    body { background: #fff; color: #000; }
    .af-main__inner { grid-template-columns: 1fr !important; padding: 0; }
}



/* ============================================================================
 * com_font template "webfont" - layout cloned from webfont.vn-style design.
 * Single namespace #wfRoot for hard isolation from the host Joomla template.
 * ========================================================================== */



#wfRoot a            { color: inherit; text-decoration: none; }
#wfRoot a:hover      { color: #000; }
#wfRoot img          { max-width: 100%; height: auto; display: block; }
#wfRoot h1, #wfRoot h2, #wfRoot h3, #wfRoot h4 {
    margin: 0 0 12px;
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.25;
}

/* ---- Hero (homepage) ------------------------------------------------- */
.wfHero {
    background:
        radial-gradient(800px 320px at 80% 30%, rgba(80,30,140,0.55), transparent 60%),
        radial-gradient(600px 240px at 20% 80%, rgba(20,40,80,0.50), transparent 60%),
        #1e3a8a;
    color: #fff;
    padding: 48px 24px 56px;
    border-radius: 12px;
    margin: 0 0 32px;
    overflow: hidden;
    position: relative;
}
.wfHero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}
.wfHero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #ffd86b;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}
.wfHero__title {
    font-size: 38px;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.wfHero__sub {
    color: rgba(255,255,255,0.80);
    font-size: 16px;
    max-width: 560px;
    margin: 0 0 24px;
}
.wfHero__search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    padding: 6px 6px 6px 22px;
    max-width: 520px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.wfHero__search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    height: 44px;
    font-size: 15px;
    color: #1a1a1a;
}
.wfHero__search button {
    border: 0;
    background: #ef4060;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.wfHero__search button:hover { background: #d9364e; }
.wfHero__hint {
    margin-top: 14px;
    color: rgba(255,255,255,0.65);
    font-size: 13px;
}
.wfHero__hint a { color: rgba(255,255,255,0.95); text-decoration: underline; }

.wfHero__demo {
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 28px 24px;
    color: rgba(255,255,255,0.90);
    overflow: hidden;
}
.wfHero__demo-row {
    white-space: nowrap;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 6px 0;
}
.wfHero__demo-row + .wfHero__demo-row { color: rgba(255,255,255,0.70); }

/* ---- Layout shell --------------------------------------------------- */
.wfShell {
    margin: 0 auto;    
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
}
.wfShell--full { grid-template-columns: 1fr; }

/* ---- Sidebar (Danh mục font) ---------------------------------------- */
.wfSide {
    background: transparent;
}
.wfSide__head {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    color: #ef4060;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
}
.wfSide__head svg { width: 18px; height: 18px; }
.wfSide__list {
    list-style: none;
    padding: 6px 0;
    margin: 8px 0 0;
}
.wfSide__list li { margin: 0; }
.wfSide__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #1a1a1a;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.wfSide__list a:hover { background: #fff; color: #ef4060; }
.wfSide__list a.is-active {
    background: #fef2f2;
    color: #ef4060;
    font-weight: 600;
}
.wfSide__list .wfIcon { color: #9ca3af; width: 18px; flex: 0 0 18px; display: inline-flex; }
.wfSide__list a.is-active .wfIcon { color: #ef4060; }
.wfSide__list .wfCount {
    margin-left: auto;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 600;
}
.wfSide__list a.is-active .wfCount { color: #ef4060; }

/* ---- Main column header --------------------------------------------- */
.wfHead {
    margin: 18px 0 18px;
}
.wfHead__title {
    font-size: 22px;
    font-weight: 800;
    margin: 0px !important;
    letter-spacing: 0.05em;
}
.wfHead__meta {
    color: #9ca3af;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.wfHead__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wf-link);
    font-size: 13px;
}

/* ---- Card grid ------------------------------------------------------ */
.wfGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.wfGrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wfGrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wfCard {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
}
.wfCard:hover {  border-color: #ef4060; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(239, 64, 96, 0.1); }

.wfCard__preview {
    background: linear-gradient(180deg, #fafbff 0%, #f1f3f9 100%);
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: #1a1a1a;
    line-height: 1;
    letter-spacing: -0.01em;
    padding: 12px;
    text-align: center;
    /* Preview text can be arbitrary (admin-controlled "preview text"
       option + item title). Without these, a long string of glyphs runs
       past the card edge and overlaps the next card. We force breaks at
       any character so the preview stays inside the 150px box and any
       overflowing tail is clipped instead of leaking across the row. */
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.wfCard__body { padding: 16px; }
.wfCard__title {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
}
.wfCard__title a {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}
.wfCard__title a:hover { color: #ef4060; }

.wfBadge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
a.wfBadge { text-decoration: none; transition: filter .15s ease, transform .15s ease; }
a.wfBadge:hover { filter: brightness(0.95); transform: translateY(-1px); }
.wfBadge--free   { background: #dcfce7; color: #16a34a; }
a.wfBadge--free:hover { color: #16a34a; }
.wfBadge--vip    { background: #fff4d6; color: #b78103; }
.wfBadge--cat    { background: #fef2f2; color: #ef4060; }
a.wfBadge--cat:hover { color: #ef4060; }

.wfMeta {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    color: #9ca3af;
    font-size: 13px;
}
.wfMeta li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.wfMeta svg { width: 14px; height: 14px; flex: 0 0 14px; opacity: .85; }

/* Tag chips. Compact rounded pills shown between meta and the download
 * button. Each chip links to the K2 tag listing when available. */
.wfTags {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.wfTags li { margin: 0; }
.wfTag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fef2f2;
    color: #ef4060;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
a.wfTag:hover {
    background: #fff;
    color: #d9364e;
    border-color: #ef4060;
}
/* Category + extra-category chips share the .wfTag shape but use a
 * cooler palette so they read distinctly from the pink tag chips. */
.wfTags--cats { margin-bottom: 8px; }
.wfTag--cat {
    background: #eef2ff;
    color: #4338ca;
    font-weight: 600;
}
a.wfTag--cat:hover { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.wfTag--xcat {
    background: #f1f5f9;
    color: #475569;
}
a.wfTag--xcat:hover { background: #e2e8f0; color: #1e293b; border-color: #cbd5e1; }

.wfBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.wfBtn--pink     { background: #ef4060; color: #fff; }
.wfBtn--pink:hover { background: #d9364e; color: #fff; }
.wfBtn--block    { width: 100%; }
.wfBtn--ghost    { background: transparent; color: #9ca3af; border: 1px solid #e5e7eb; }
.wfBtn--ghost:hover { color: #ef4060; border-color: #ef4060; }
.wfBtn svg { width: 16px; height: 16px; }

/* ---- Favorite buttons ----------------------------------------------- */
.wfCard { position: relative; }
.wfFav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 1px solid #e5e7eb;
    color: #9ca3af;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15,24,40,0.08);
    transition: color .15s, background .15s, transform .15s;
    padding: 0;
    z-index: 2;
}
.wfFav:hover { color: #ef4060; transform: scale(1.05); }
.wfFav.is-active { color: #ef4060; background: #fef2f2; border-color: #ef4060; }
.wfFav.is-active svg { fill: #ef4060; }
.wfFav svg { width: 18px; height: 18px; }

.wfFav--inline {
    position: static;
    width: auto;
    height: auto;
    border-radius: 10px;
    padding: 10px 14px;
    background: transparent;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    box-shadow: none;
}
.wfFav--inline:hover { color: #ef4060; border-color: #ef4060; transform: none; }
.wfFav--inline.is-active { color: #ef4060; background: #fef2f2; border-color: #ef4060; }

.wfItem__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-self: end;
}

.wfSide__fav { color: #ef4060 !important; }
.wfSide__fav .wfIcon { color: #ef4060; }
.wfSide__fav:hover { background: #fef2f2; }

/* ---- Pagination ----------------------------------------------------- */
.wfPagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 28px 0 0;
}
.wfPagination .pagination-list,
.wfPagination .pagination ul,
.wfPagination ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 6px;
    flex-wrap: wrap;
}
.wfPagination li { margin: 0; }
.wfPagination a,
.wfPagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
}
.wfPagination .active span,
.wfPagination a.active,
.wfPagination span.active {
    background: #ef4060;
    color: #fff;
    border-color: #ef4060;
}
.wfPagination a:hover { color: #ef4060; border-color: #ef4060; }
.wfPagination .disabled span { color: #c5cad4; }
.wfPagination__counter {
    margin-left: 12px;
    color: #9ca3af;
    font-size: 13px;
}

/* ---- Search form (generic view) ------------------------------------ */
.wfSearchForm {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 8px 0 14px;
    flex-wrap: wrap;
}
.wfSearchForm__input {
    flex: 1 1 240px;
    min-width: 200px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 14px;
    color: #1a1a1a;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.wfSearchForm__input:focus {
    border-color: #ef4060;
    box-shadow: 0 0 0 3px #fef2f2;
}
.wfHead__title-q {
    color: #ef4060;
    font-weight: 700;
    margin-left: 6px;
}

/* ---- Breadcrumb ----------------------------------------------------- */
.wfCrumbs {
    color: #9ca3af;
    font-size: 13px;
    padding: 14px 0 4px;
}
.wfCrumbs a:hover { color: #ef4060; }
.wfCrumbs .sep { margin: 0 6px; opacity: .55; }

/* ---- Item detail ---------------------------------------------------- */
.wfItem {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.wfItem__top {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 18px;
    align-items: center;
}
.wfItem__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}
.wfItem__title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px;
}
.wfItem__meta {
    color: #9ca3af;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.wfItem__meta span { display: inline-flex; align-items: center; gap: 4px; }
.wfItem__meta svg { width: 14px; height: 14px; }

.wfPanel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px 24px;
}
.wfPanel__head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ef4060;
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 12px;
}
.wfPanel__head svg { width: 18px; height: 18px; }
.wfPreview__hero {
    font-size: 56px;
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 6px;
    word-break: break-word;
}
.wfPreview__row {
    font-size: 22px;
    margin: 6px 0;
    color: #1a1a1a;
    word-break: break-word;
}
.wfPreview__row--muted { color: #9ca3af; font-size: 18px; }

/* When the live preview is in inline-style mode (font-size set by the
   customizer), the hero/row defaults need to inherit so the slider is
   actually in control. */
.wfPreview[style*="font-size"] .wfPreview__hero { font-size: inherit; line-height: inherit; }
.wfPreview[style*="font-size"] .wfPreview__row  { font-size: inherit; line-height: inherit; }

.wfPreview--dark {
    background: #1e3a8a;
    color: #fff;
    border-radius: 8px;
    padding: 18px 20px;
    transition: background .2s, color .2s;
}
.wfPreview--dark .wfPreview__row,
.wfPreview--dark .wfPreview__row--muted { color: rgba(255,255,255,0.78); }

/* ---- Preview customizer wrapper (hosts mod_font_tester) ------------- */
.wfTune {  
    border-top: 1px dashed var(--wf-border);
}
.wfTune .modFontTester { margin: 0; }

/* Editable scratchpad driven by mod_font_tester. */
.preview-box {
    margin-top: 16px;
    min-height: 96px;
    padding: 18px 20px;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    font-size: 48px;
    line-height: 1.2;
    word-break: break-word;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.preview-box:hover  { border-color: #fef2f2; }
.preview-box:focus  {
    border-style: solid;
    border-color: #ef4060;
    box-shadow: 0 0 0 3px #fef2f2;
}

.wfInfo {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0;
    border-top: 1px solid #e5e7eb;
}
.wfInfo > dt,
.wfInfo > dd {
    padding: 12px 4px;
    border-bottom: 1px solid #e5e7eb;
    margin: 0;
    font-size: 14px;
}
.wfInfo > dt { color: #9ca3af; }
.wfInfo > dd { color: #1a1a1a; }

.wfNote {
    background: #fff7f8;
    border: 1px solid #ffd9df;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #b8334a;
    margin: 14px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.wfNote svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; }

.wfDownloadBlock {
    text-align: center;
    margin: 16px 0 4px;
}
.wfDownloadBlock .wfBtn { padding: 12px 22px; font-size: 15px; }

/* ---- Footer --------------------------------------------------------- */
.wfFoot {
    background: #1e3a8a;
    color: rgba(255,255,255,0.78);
    padding: 40px 16px 18px;
    margin: 48px 0 0;
}
.wfFoot__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
}
.wfFoot h4 { color: #fff; font-size: 14px; margin: 0 0 14px; }
.wfFoot a { color: rgba(255,255,255,0.78); font-size: 14px; }
.wfFoot a:hover { color: #fff; }
.wfFoot__brand p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.55); }
.wfFoot__brand em { font-style: normal; color: rgba(255,255,255,0.85); }
.wfFoot__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wfFoot__social { display: flex; gap: 10px; }
.wfFoot__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    transition: background .15s;
}
.wfFoot__social a:hover { background: rgba(255,255,255,0.18); color: #fff; }
.wfFoot__social svg { width: 16px; height: 16px; }
.wfFoot__bottom {
    max-width: 1180px;
    margin: 24px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
}

/* ---- Item image (driven by mod_font_tester toggle) ------------------ */
/*
 * Each card renders the K2 item image at the top via `.wfCard__image`.
 * mod_font_tester toggles `.is-image-hidden` on every container that
 * matches its `container_selector` admin param (the webfont wrapper
 * opts in via `.itemListView`). When hidden, the image element is
 * removed from layout entirely so the live preview slides up.
 */
.wfCard__image {
    display: block;
    aspect-ratio: 16 / 9;
    background: #f4f6fb;
    border-bottom: 1px solid #e5e7eb;
    overflow: hidden;
}
.wfCard__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.wfCard:hover .wfCard__image img { transform: scale(1.03); }
.itemListView.is-image-hidden   .wfCard__image   { display: none; }
.itemListView.is-preview-hidden .wfCard__preview { display: none; }
/*
 * In exclusive mode where the image becomes the only visual, let it
 * grow to fill the card height in grid mode.
 */
.itemListView.is-preview-hidden .wfCard__image { aspect-ratio: 4 / 3; }

/* ---- View modes (driven by mod_font_tester) ------------------------- */
/*
 * mod_font_tester toggles `.is-view-grid` / `.is-view-list` on every node
 * matched by its `container_selector` admin param (default includes
 * `.itemListView`). The webfont category wrapper opts in via that class.
 *
 * Grid mode is the natural CSS already declared above (.wfGrid). List
 * mode rebuilds each card as a Google-Fonts-style row: an oversized
 * full-width specimen on top, then a divider, then a single meta strip
 * (badges + title + author on the left, price / CTA on the right).
 * The card image is hidden in list mode because the specimen IS the
 * visual hook in this layout.
 */
.itemListView.is-view-list .wfGrid {
    grid-template-columns: 1fr;
    gap: 16px;
}
.itemListView.is-view-list .wfCard {
    display: flex;
    flex-direction: column;
    /* Reset any grid-mode overrides so the children stack vertically. */
    grid-template-columns: none;
    grid-template-rows: none;
}
/* Image is redundant when the specimen already showcases the font. */
.itemListView.is-view-list .wfCard__image { display: none; }

.itemListView.is-view-list .wfCard__preview {
    width: 100%;
    height: auto;
    min-height: 140px;
    padding: 28px 28px 24px;
    font-size: 64px;
    line-height: 1.05;
    text-align: left;
    justify-content: flex-start;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

/* Body becomes a 2-column strip: meta column (left) + actions (right). */
.itemListView.is-view-list .wfCard__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 28px;
    row-gap: 4px;
    align-items: center;
    padding: 14px 28px 18px;
}
/* Order of children in the LEFT column from top to bottom:
   1. wfTags--cats (badges row: FREE / HOT / NEW / category chips)
   2. wfCard__title (bold font name + inline FREE badge)
   3. wfMeta (author / styles / created date as inline pills)
   The RIGHT column hosts the price row and the CTA button, vertically
   centred against the whole left stack. */
.itemListView.is-view-list .wfCard__title {
    margin: 0;
    grid-column: 1 / 2;
    justify-content: flex-start;
    gap: 10px;
    font-size: 17px;
}
.itemListView.is-view-list .wfCard__title a { font-size: 17px; }
.itemListView.is-view-list .wfMeta {
    grid-column: 1 / 2;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 13px;
}
.itemListView.is-view-list .wfMeta li { padding: 0; }
.itemListView.is-view-list .wfTags--cats {
    grid-column: 1 / 2;
    margin: 0 0 2px;
}
/* Generic tag chip list (below cats) drops to the left column too. */
.itemListView.is-view-list .wfTags:not(.wfTags--cats) {
    grid-column: 1 / 2;
    margin: 4px 0 0;
}
/* Price + CTA collapse into the RIGHT column. They share a single grid
   slot and stack via their own flex so "Add to cart" sits under the
   price, or the standalone "Download" button centres vertically. */
.itemListView.is-view-list .wfCard__priceRow {
    grid-column: 2 / 3;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: end;
    margin: 0;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    color: var(--wf-green);
}
.itemListView.is-view-list .wfCard__priceRow .wfPrice { font-size: 15px; }
.itemListView.is-view-list .wfCard__buyForm {
    grid-column: 2 / 3;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: end;
    margin: 0;
}
.itemListView.is-view-list .wfBtn--block {
    grid-column: 2 / 3;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: end;
    width: auto;
    white-space: nowrap;
    padding: 9px 18px;
    font-size: 13px;
}
/* Heart sits at the right edge of the specimen pane. */
.itemListView.is-view-list .wfFav {
    top: 14px;
    right: 18px;
}

/* Grid mode restores the card image, but ONLY when the tester hasn't
   asked to hide it. Without the :not() guard this selector wins over
   `.itemListView.is-image-hidden .wfCard__image { display:none }` due
   to source order at equal specificity, so the eye-toggle silently
   stops working in grid mode. */
.itemListView.is-view-grid:not(.is-image-hidden) .wfCard__image { display: block; }
.itemListView.is-view-grid .wfCard__preview { height: 150px; min-height: 0; border-right: 0; padding: 0 16px; font-size: 32px; text-align: center; justify-content: center; }
.itemListView.is-view-grid .wfCard__body    { display: block; padding: 16px; }

/* Narrow viewports: collapse the 2-column meta strip so the price /
 * CTA sit below the meta instead of overlapping it. Also tone the
 * specimen down a couple of steps so it doesn't dominate small screens. */
@media (max-width: 720px) {
    .itemListView.is-view-list .wfCard__preview {
        font-size: 40px;
        padding: 20px 18px 16px;
    }
    .itemListView.is-view-list .wfCard__body {
        grid-template-columns: 1fr;
        padding: 14px 18px 18px;
    }
    .itemListView.is-view-list .wfCard__priceRow,
    .itemListView.is-view-list .wfCard__buyForm,
    .itemListView.is-view-list .wfBtn--block {
        grid-column: 1 / 2;
        grid-row: auto;
        justify-self: stretch;
        text-align: left;
    }
    .itemListView.is-view-list .wfBtn--block { width: 100%; }
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 980px) {
    .wfHero__inner { grid-template-columns: 1fr; }
    .wfHero__demo { display: none; }
    .wfShell { grid-template-columns: 1fr; }
    .wfSide { order: 2; }
    .wfFoot__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .wfGrid { grid-template-columns: 1fr; }
    .wfGrid--2, .wfGrid--4 { grid-template-columns: 1fr; }
    .wfHero__title { font-size: 26px; }
    .wfItem__top { grid-template-columns: 1fr; }
    .wfInfo { grid-template-columns: 1fr; }
    .wfInfo > dt { padding-bottom: 0; border: 0; }
    .wfFoot__inner { grid-template-columns: 1fr; }
}

/* ============================================================================
 * Dark theme + floating Light/Dark toggle button.
 * Activates when JS sets `data-theme="dark"` on #wfRoot. The button itself
 * is injected by templates/shared/theme-toggle.js.
 * ========================================================================== */

/* Floating circular toggle button (injected by theme-toggle.js) */
.wfThemeToggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.wfThemeToggle:hover { transform: translateY(-2px); color: #ef4060; }
.wfThemeToggle:focus { outline: 2px solid #ef4060; outline-offset: 2px; }
.wfThemeToggle svg { display: block; }



/* =========================================================================
   18. Layout
   ========================================================================= */

.grid-area { margin:0 auto; width:100%; }
.grid-area { max-width:1440px;}

.wfGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 1440px) {
    .wfGrid {
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 20px;
    }
}
@media (max-width: 1280px) {
    .wfGrid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 20px;
    }
}

@media (max-width: 980px) {
    .wfGrid {
         grid-template-columns: repeat(1, minmax(0, 1fr));
         gap: 20px;
    }

}