/*
Theme Name: TCN Theme v2 (TCMOCKUP look)
Theme URI: https://thecomission.com
Author: The Comission Network
Description: The Comission Network — cinematic dark theme with department ecosystems, content modal, and access control.
Version: 2.0.0
License: GNU General Public License v2 or later
Text Domain: tcn-theme
Tags: cinematic, dark, premium, network, membership
*/

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
    --clr-bg: #151516;
    --clr-surface: #f7f7f8;
    --clr-surface-light: #f0f1f3;
    --clr-primary: #0d9488;
    --clr-primary-tint: #a0f1ea;
    --clr-primary-soft: rgba(var(--dept-rgb,13,148,136),0.10);
    --clr-primary-soft-border: rgba(var(--dept-rgb,13,148,136),0.25);
    --clr-accent: #dc2626;
    --clr-error: #f87171;
    --clr-error-soft: rgba(239,68,68,0.1);
    --clr-text-main: #0a0a0a;
    --clr-text-muted: #6b7280;
    --clr-
var(--line);

    --clr-cat-purple: #7c3aed;
    --clr-cat-orange: #f97316;
    --clr-cat-green:  #16a34a;
    --clr-cat-red:    #dc2626;
    --clr-cat-blue:   #2563eb;
    --clr-cat-teal:   #0d9488;

    --clr-invert-bg: #0a0a0a;
    --clr-invert-text: #ffffff;
    --clr-invert-text-muted: rgba(255,255,255,0.65);

    --font-main: 'Inter', sans-serif;
    --font-title: 'Dela Gothic One', cursive;

    --sp-xs: 4px; --sp-sm: 12px; --sp-md: 24px; --sp-lg: 48px; --sp-xl: 96px;

    --container-max: 1600px;
    --header-height: 72px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Department icon — one consistent line-icon language (see
   tcn_dept_icon_map() in inc/tcn-theme-support.php, the single source
   every department icon on the site is rendered from). Scales with
   whatever font-size context it's dropped into rather than needing a
   size rule per usage. */
.tcn-dept-icon{width:1em;height:1em;display:inline-block;vertical-align:-0.15em}

/* ================================================================
   RESET & BASE
   ================================================================ */
*{margin:0;padding:0;box-sizing:border-box}
/* Ambient wash — ties the dark canvas together across section boundaries
   instead of a flat solid color, using the same purple/teal/blue language
   as the hero blobs so light (card) and dark (canvas) areas read as one
   continuous surface rather than separate flat zones. Fixed so it doesn't
   visibly repeat/tile as the page scrolls. */
body{
    background-color:var(--clr-bg);
    background-image:
        radial-gradient(ellipse 900px 700px at 8% -5%, rgba(139,92,246,.14), transparent 60%),
        radial-gradient(ellipse 900px 700px at 95% 15%, rgba(18,196,139,.12), transparent 60%),
        radial-gradient(ellipse 1000px 800px at 50% 100%, rgba(59,130,246,.10), transparent 65%);
    background-attachment:fixed;
    background-repeat:no-repeat;
    color:var(--clr-text-main);font-family:var(--font-main);overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative;
}
h1,h2,h3,h4,.dela-title{font-family:var(--font-title);text-transform:uppercase}
a{color:inherit;text-decoration:none;transition:var(--transition)}
button{background:none;border:none;cursor:pointer;font-family:inherit;color:inherit}
img{max-width:100%;height:auto}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--sp-md)}

/* ================================================================
   HEADER
   ================================================================ */
.site-header{height:var(--header-height);background:rgba(255,255,255,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;border-bottom:1px solid var(--clr-border);position:sticky;top:0;z-index:1000;transition:background .3s,border-color .3s}
.header-container{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 var(--sp-lg)}
.network-logo-wrapper{display:flex;align-items:center;gap:12px}
.network-logo{height:32px;width:32px;border-radius:6px}
.network-logo-banner{height:30px;width:auto;object-fit:contain}
.network-title{font-size:1rem;font-family:var(--font-title);color:var(--clr-text-main);letter-spacing:0.05em}
.main-nav{display:flex;gap:28px;font-size:0.7rem;font-weight:700;font-family:var(--font-title);text-transform:uppercase;letter-spacing:0.1em;color:var(--clr-text-main)}
.main-nav .nav-link{position:relative;padding-bottom:4px}
.main-nav .nav-link:hover,.main-nav .nav-link.active{color:var(--clr-text-main)}
.main-nav .nav-link.active::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--clr-text-main)}
.header-actions{display:flex;align-items:center;gap:12px}
.main-login-btn{background:transparent;color:var(--clr-text-main);
var(--line);font-size:0.65rem;font-weight:800;padding:8px 18px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:0.08em;transition:var(--transition)}
.main-login-btn:hover{border-color:var(--clr-text-main)}
.main-access-btn{background:var(--ink);color:var(--inverse);font-size:0.65rem;font-weight:900;padding:8px 18px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:0.08em;transition:var(--transition)}
.main-access-btn:hover{background:var(--clr-primary)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;padding:4px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--clr-text-main);border-radius:1px;transition:var(--transition)}

@media(max-width:768px){
    .main-nav{display:none;position:fixed;top:var(--header-height);left:0;right:0;background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;padding:24px;gap:20px;border-bottom:1px solid var(--clr-border);z-index:999}
    .main-nav.open{display:flex}
    .nav-hamburger{display:flex}
    .main-access-btn{display:none}
}

/* ================================================================
   BUTTONS
   ================================================================ */
.fp-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--radius-sm);font-weight:700;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;transition:var(--transition);cursor:pointer;border:none}
.fp-btn--primary{background:var(--ink);color:var(--inverse)}
.fp-btn--primary:hover{background:var(--clr-primary)}
.fp-btn--ghost{background:transparent;color:var(--clr-text-main);
var(--line)}
.fp-btn--ghost:hover{border-color:var(--clr-text-main)}

/* ================================================================
   CONTENT CARDS (.post-card)
   ================================================================ */
.content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;padding:var(--sp-md) 0}
.post-card{background:var(--clr-surface);border-radius:var(--radius-sm);overflow:hidden;position:relative;border:1px solid var(--clr-border);transition:var(--transition);cursor:pointer}
.post-card:hover{border-color:var(--clr-primary)}
.post-thumbnail{aspect-ratio:16/9;background-size:cover;background-position:center;transition:var(--transition)}
.post-meta-overlay{padding:14px 16px}
.post-card-title{font-size:0.8rem;color:var(--clr-text-main);text-transform:uppercase;font-family:var(--font-title);line-height:1.3}
.post-card-date{font-size:0.65rem;color:var(--clr-text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:0.05em}
.post-card .type-badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,0.75);backdrop-filter:blur(4px);font-size:0.6rem;font-weight:800;padding:4px 10px;border-radius:4px;color:#fff;letter-spacing:0.08em;text-transform:uppercase}
.post-card.is-locked .post-thumbnail{filter:grayscale(1) brightness(0.4)}
.post-card.is-locked::after{content:'\1F512';position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:2rem;opacity:0.8}
.post-card.is-featured{grid-column:span 2}

@media(max-width:768px){
    .content-grid{grid-template-columns:1fr 1fr;gap:12px}
    .post-card.is-featured{grid-column:span 1}
}
@media(max-width:480px){
    .content-grid{grid-template-columns:1fr}
}

/* ================================================================
   LIBRARY GRID (smaller cards)
   ================================================================ */
.tcp-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.library-item-alt{background:var(--clr-surface-light);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--clr-border);transition:var(--transition);cursor:pointer}
.library-item-alt:hover{border-color:var(--clr-primary)}
.lib-item-thumb{aspect-ratio:16/9;background-size:cover;background-position:center;position:relative}
.lib-item-type{position:absolute;top:8px;left:8px;background:rgba(0,0,0,0.7);font-size:0.6rem;font-weight:800;padding:3px 8px;border-radius:4px;color:#fff}
.lib-item-meta{padding:12px}
.lib-item-title{font-size:0.8rem;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-title)}
.lib-item-artist{font-size:0.65rem;color:var(--clr-text-muted)}

/* ================================================================
   SECTION LABELS
   ================================================================ */
.section-label{display:flex;align-items:center;gap:8px;font-size:0.7rem;font-weight:900;letter-spacing:0.15em;color:var(--clr-text-muted);margin-bottom:16px;text-transform:uppercase}
.section-label svg{color:var(--clr-primary)}

/* ================================================================
   CINEMATIC MODAL
   ================================================================ */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);backdrop-filter:blur(20px);z-index:2000;display:none;opacity:0;transition:opacity 0.3s ease;overflow-y:auto;padding:var(--sp-md)}
.modal-overlay.active{display:flex;justify-content:center;align-items:flex-start;padding-top:60px;opacity:1}
.modal-container{width:100%;max-width:900px;background:var(--clr-surface);border-radius:var(--radius-lg);overflow:hidden;position:relative;border:1px solid var(--clr-border);margin-bottom:60px}
.modal-close-btn{position:absolute;top:12px;right:16px;z-index:1001;font-size:28px;color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);border-radius:50%;border:1px solid rgba(255,255,255,0.2);transition:var(--transition);pointer-events:auto}
.modal-close-btn:hover{background:var(--dept-color);border-color:var(--dept-color);color:#fff}

/* Modal Header */
.modal-header{padding:20px 24px;border-bottom:1px solid var(--clr-border);display:flex;align-items:center;gap:16px}
.modal-title-group{display:flex;align-items:center;gap:16px;flex:1}
.modal-icon-box{width:48px;height:48px;flex-shrink:0;border-radius:8px;background:var(--clr-surface-light);display:flex;align-items:center;justify-content:center;overflow:hidden}
.modal-icon-box img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.modal-main-title{font-size:1rem;font-family:var(--font-title);letter-spacing:-0.01em;line-height:1.2}
.modal-sub-title{font-size:0.7rem;color:var(--dept-color);font-weight:700;letter-spacing:0.08em}

/* Modal Player Area */
.modal-audio-main{background:var(--panel-2)}
#twc-yt-wrap{width:100%;aspect-ratio:16/9;background:var(--panel-2);position:relative}
#twc-audius-wrap{width:100%;aspect-ratio:16/9;background:#0a0a10;overflow:hidden}
#twc-audius-wrap iframe{width:100%;height:100%;border:0}
#twc-audio-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;gap:16px;background:#0a0a10}
.play-overlay-btn{width:80px;height:80px;border-radius:50%;background:rgba(var(--dept-rgb,13,148,136),0.15);border:2px solid var(--dept-color);display:flex;align-items:center;justify-content:center;color:var(--dept-color);transition:var(--transition)}
.play-overlay-btn:hover{background:rgba(var(--dept-rgb,13,148,136),0.25);transform:scale(1.1)}
#twc-nosource-wrap{display:flex;align-items:center;justify-content:center;min-height:180px;color:var(--clr-text-muted);font-size:13px;letter-spacing:0.05em}

/* Player Bar */
.player-footer{padding:12px 24px;background:var(--clr-surface-light);border-top:1px solid var(--clr-border)}
.player-bar-wrapper{display:flex;align-items:center;gap:12px}
.play-pause-small{width:32px;height:32px;border-radius:50%;background:var(--dept-color);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.time-display{font-size:11px;color:var(--clr-text-muted);white-space:nowrap;min-width:80px}
.progress-container{flex:1;height:4px;background:rgba(0,0,0,0.1);border-radius:2px;position:relative;cursor:pointer}
.progress-bar{height:100%;background:var(--dept-color);border-radius:2px;width:0;transition:width 0.1s linear}
.progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--dept-color);border-radius:50%;left:0;opacity:0;transition:opacity 0.2s}
.progress-container:hover .progress-handle{opacity:1}
.volume-control{display:flex;align-items:center;gap:6px;color:var(--clr-text-muted)}
.volume-control input[type="range"]{width:60px;accent-color:var(--dept-color)}

/* Metadata Tray */
.metadata-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--clr-border)}
.meta-item{padding:14px 20px;background:var(--clr-surface)}
.meta-label{font-size:0.6rem;color:var(--clr-text-muted);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:4px}
.meta-value{font-size:0.8rem;font-weight:600}

/* Modal Description */
.modal-description{padding:20px 24px;font-size:0.85rem;line-height:1.7;color:var(--clr-text-muted);border-top:1px solid var(--clr-border)}

/* Modal Comments */
.modal-comments-section{padding:20px 24px;border-top:1px solid var(--clr-border)}
.comments-header{font-size:0.7rem;font-weight:800;letter-spacing:0.12em;color:var(--clr-text-muted);margin-bottom:12px}
.comment-input-row{display:flex;align-items:center;gap:12px}
.comment-avatar{width:32px;height:32px;border-radius:50%;background:var(--clr-surface-light);flex-shrink:0}
.comment-input{flex:1;background:var(--clr-surface-light);border:1px solid var(--clr-border);padding:10px 14px;border-radius:8px;color:var(--clr-text-muted);font-size:0.8rem}

/* Modal Footer */
.modal-footer-actions{display:flex;align-items:center;gap:16px;padding:14px 24px;border-top:1px solid var(--clr-border)}
.modal-action-btn{display:flex;align-items:center;gap:6px;font-size:0.75rem;color:var(--clr-text-muted);transition:var(--transition)}
.modal-action-btn:hover{color:var(--dept-color)}

/* Locked Screen — no background of its own on purpose (same reasoning as
   .tcn-gate-card--embedded): .modal-container is already the one light
   surface this sits on. A literal var(--clr-bg) here always resolved to
   the sitewide dark canvas (that token has no light override anywhere,
   by design, for genuine content pages) regardless of which page opened
   the popup — so the exact same locked-audio/locked-product gate looked
   fine on pages that happened to also scope --clr-bg light for their own
   reasons (e.g. page-instrumentals.php) and broken/dark everywhere else
   (e.g. a channel page), even though it's the identical shared component
   either way. Transparent makes it render identically everywhere. */
#twc-locked-screen{position:relative;width:100%;max-height:80vh;background:transparent;display:none;overflow-y:auto}
#twc-locked-screen.active{display:block}
#twc-gate-slot{display:flex;align-items:center;justify-content:center;min-height:200px}
.lock-icon-lg{font-size:4rem;color:var(--clr-accent);margin-bottom:24px}
.unlock-cta-title{font-family:var(--font-title);font-size:1.5rem;margin-bottom:12px}
.unlock-cta-text{color:var(--clr-text-muted);font-size:0.9rem;margin-bottom:32px;max-width:400px}

/* Download button */
.modal-download-btn{display:inline-flex;align-items:center;gap:6px;margin:12px 20px 0;padding:8px 16px;border-radius:6px;background:rgba(var(--dept-rgb,13,148,136),0.12);border:1px solid rgba(var(--dept-rgb,13,148,136),0.3);color:var(--dept-color);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;transition:var(--transition)}
.modal-download-btn:hover{background:rgba(var(--dept-rgb,13,148,136),0.2)}

@media(max-width:768px){
    .metadata-tray{grid-template-columns:repeat(2,1fr)}
    .modal-overlay.active{padding-top:20px}
}

/* ================================================================
   LOCKED CONTENT OVERLAY
   ================================================================ */
.locked-overlay{position:absolute;inset:0;background:rgba(5,5,5,0.85);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;border-radius:var(--radius-md);gap:8px}
.locked-overlay .lock-emoji{font-size:2rem}
.locked-overlay .lock-text{font-size:0.65rem;color:var(--clr-text-muted);text-transform:uppercase;letter-spacing:0.1em}

/* ================================================================
   CODES BAR
   ================================================================ */
.tcn-codes-bar{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:20px 24px;margin-bottom:32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tcn-codes-bar .codes-label{font-size:0.65rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:var(--clr-text-muted);white-space:nowrap}
.tcn-codes-bar .code-pills{display:flex;gap:10px;flex-wrap:wrap}
.code-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;background:rgba(var(--dept-rgb,13,148,136),0.12);border:1px solid rgba(var(--dept-rgb,13,148,136),0.25);color:var(--clr-primary);font-size:0.7rem;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:var(--transition)}
.code-pill:hover{background:rgba(var(--dept-rgb,13,148,136),0.2);border-color:var(--clr-primary)}
.code-pill.copied{background:var(--clr-primary);color:#000}
.code-pill svg{width:12px;height:12px}

/* ================================================================
   DEPARTMENT ECOSYSTEM
   ================================================================ */
.tcn-dept-hero{position:relative;padding:52px 0 36px;overflow:hidden}
.dept-hero-inner{position:relative;z-index:1;max-width:var(--container-max);margin:0 auto;padding:0 var(--sp-md)}
.dept-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:4px;background:rgba(var(--dept-rgb,13,148,136),0.1);border:1px solid rgba(var(--dept-rgb,13,148,136),0.2);color:var(--clr-primary);font-size:0.6rem;font-weight:800;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:16px}
.dept-title{font-size:clamp(1.6rem,3.2vw,2.4rem);font-family:var(--font-title);margin-bottom:8px;letter-spacing:-0.01em}
.dept-description{color:var(--clr-text-muted);font-size:0.9rem;max-width:600px;line-height:1.6}
.dept-stats{display:flex;gap:32px;margin-top:24px}
.dept-stat-item .stat-num{font-size:1.5rem;font-weight:800;color:var(--clr-text-main)}
.dept-stat-item .stat-label{font-size:0.6rem;color:var(--clr-text-muted);text-transform:uppercase;letter-spacing:0.1em}

.dept-inactive-banner{background:rgba(255,77,77,0.08);border:1px solid rgba(255,77,77,0.2);border-radius:var(--radius-sm);padding:12px 20px;display:flex;align-items:center;gap:12px;margin-bottom:24px}
.dept-inactive-banner svg{color:var(--clr-accent);flex-shrink:0}
.dept-inactive-banner span{font-size:0.75rem;color:var(--clr-accent);font-weight:600}

/* Filter tabs */
.tcn-filter-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.tcn-filter-tab{padding:6px 16px;border-radius:20px;font-size:0.65rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--clr-text-muted);background:var(--clr-surface);border:1px solid var(--clr-border);cursor:pointer;transition:var(--transition)}
.tcn-filter-tab:hover,.tcn-filter-tab.active{color:var(--clr-primary);border-color:var(--clr-primary);background:rgba(var(--dept-rgb,13,148,136),0.08)}

/* Search bar */
.tcn-search-bar{margin-bottom:20px}
.tcn-search-bar input{width:100%;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:12px 16px;color:var(--clr-text-main);font-size:.85rem;outline:none;transition:border-color .2s}
.tcn-search-bar input:focus{border-color:var(--clr-primary)}
.tcn-search-bar input::placeholder{color:var(--clr-text-muted)}

/* ================================================================
   FRONT PAGE HERO SYSTEM — shared across all pages
   ================================================================ */
.fp-hero{position:relative;padding:80px 0 48px;background-size:cover;background-position:center;background-color:var(--panel-2);overflow:hidden}
.fp-hero__overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(49,49,70,.82) 0%,rgba(49,49,70,.62) 45%,rgba(49,49,70,.32) 100%)}
.fp-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.fp-hero__inner{max-width:560px}
.fp-hero__eyebrow{display:block;font-size:.7rem;font-weight:800;letter-spacing:.14em;color:var(--dept-color, var(--clr-primary-tint));text-transform:uppercase;margin-bottom:16px}
.fp-hero__title{font-family:var(--font-title)!important;font-size:clamp(2rem,4vw,3rem)!important;letter-spacing:0!important;line-height:1.15!important;text-transform:none!important;color:#fff;margin-bottom:16px}
.fp-hero__title span{color:var(--dept-color, var(--clr-primary-tint))}
.fp-hero__sub{font-size:1rem;font-weight:400;color:rgba(255,255,255,.72);max-width:480px;margin:0 0 28px;line-height:1.65}
.fp-hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.fp-hero .fp-btn--ghost{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important}
.fp-hero .fp-btn--ghost:hover{border-color:var(--clr-primary-tint)!important;color:var(--clr-primary-tint)!important;background:rgba(255,255,255,.06)!important}

.fp-hero__feat-col{display:flex;flex-direction:column;gap:14px}
.fp-hero__feat{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;background-color:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);cursor:pointer}
.fp-hero__feat::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent 55%)}
.fp-hero__feat-play{position:absolute;top:16px;right:16px;z-index:1;width:40px;height:40px;border-radius:50%;background:var(--line);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.fp-hero__feat-meta{position:absolute;left:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:2px}
.fp-hero__feat-tag{font-size:.6rem;font-weight:800;letter-spacing:.1em;color:var(--clr-primary-tint)}
.fp-hero__feat-meta strong{font-family:var(--font-title);font-size:.95rem;color:#fff;text-transform:none}

.fp-hero__tiles{display:flex;gap:10px;flex-wrap:wrap}
.fp-hero__tile{flex:1;min-width:0;border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;transition:transform .2s,opacity .2s}
.fp-hero__tile:hover{opacity:.9;transform:translateY(-2px)}
.fp-hero__tile svg{flex-shrink:0}
.fp-hero__tile span{font-family:var(--font-title);font-size:.62rem;line-height:1.2;text-transform:uppercase;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}

@media(max-width:900px){.fp-hero__grid{grid-template-columns:1fr}.fp-hero__feat-col{order:-1}}
@media(max-width:768px){.fp-hero{padding:48px 0 40px}}
@media(max-width:600px){.fp-hero__actions{justify-content:center}.fp-hero__inner{text-align:center;margin:0 auto}.fp-hero__tiles{justify-content:center}}

/* Light hero variant */
.fp-hero--light{background:var(--panel)!important;background-image:none!important}
.fp-hero--light .fp-hero__overlay{display:none}
.fp-hero--light .fp-hero__title{color:var(--clr-text-main)!important}
.fp-hero--light .fp-hero__title span{color:var(--dept-color, var(--clr-primary))!important}
.fp-hero--light .fp-hero__sub{color:var(--clr-text-muted)!important}
.fp-hero--light .fp-hero__eyebrow{color:var(--dept-color, var(--clr-primary))!important}
.fp-hero--light .fp-hero__feat{border-color:var(--line)!important;background-color:var(--clr-surface)!important}
.fp-hero--light .fp-hero__feat::after{background:linear-gradient(to top,rgba(0,0,0,.5),transparent 55%)}
.fp-hero--light .fp-hero__feat-play{
rgba(255,255,255,.04)}
.fp-hero--light .fp-hero__feat-tag{color:var(--dept-color, var(--clr-primary))}
.fp-hero--light .fp-hero__feat-meta strong{color:#fff}
.fp-hero--light .fp-hero .fp-btn--ghost{color:var(--clr-text-main)!important;border-color:var(--line)!important}
.fp-hero--light .fp-hero .fp-btn--ghost:hover{border-color:var(--dept-color, var(--clr-primary))!important;color:var(--dept-color, var(--clr-primary))!important;
rgba(255,255,255,.04)!important}

/* Department Cards */
.dept-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:32px 0}
.dept-card{position:relative;background:var(--clr-surface);border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--clr-border);transition:var(--transition)}
.dept-card:hover{border-color:var(--clr-primary)}
.dept-card__img{aspect-ratio:16/9;background-size:cover;background-position:center;position:relative}
.dept-card__img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,5,0.8),transparent)}
.dept-card__meta{padding:16px;position:relative}
.dept-card__name{font-family:var(--font-title);font-size:0.9rem;margin-bottom:4px}
.dept-card__status{font-size:0.6rem;color:var(--clr-primary);font-weight:700;letter-spacing:0.1em;text-transform:uppercase}
.dept-card.is-inactive{opacity:0.4;filter:grayscale(0.5)}
.dept-card.is-inactive .dept-card__status{color:var(--clr-text-muted)}

/* ================================================================
   CHANNEL PAGE
   ================================================================ */
.channel-hero{text-align:center;padding:60px 0 40px}
.channel-avatar{width:80px;height:80px;border-radius:50%;border:2px solid var(--clr-primary);margin:0 auto 16px;background:var(--clr-surface);display:flex;align-items:center;justify-content:center;font-family:var(--font-title);font-size:1.5rem;overflow:hidden}
.channel-avatar img{width:100%;height:100%;object-fit:cover}
.channel-name{font-family:var(--font-title);font-size:1.5rem;margin-bottom:4px}
.channel-handle{font-size:0.75rem;color:var(--clr-primary);letter-spacing:0.08em}
.channel-nav{display:flex;justify-content:center;gap:32px;margin-top:24px;padding-bottom:16px;border-bottom:1px solid var(--clr-border)}
.channel-nav a{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--clr-text-muted);padding-bottom:16px;border-bottom:2px solid transparent;transition:var(--transition)}
.channel-nav a:hover,.channel-nav a.active{color:var(--clr-primary);border-bottom-color:var(--clr-primary)}

/* ================================================================
   COCKPIT PLAYER (single audio/video)
   ================================================================ */
.cinematic-container{max-width:1200px;margin:40px auto;padding:0 20px}
.player-cockpit{background:var(--panel-2);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--clr-border);box-shadow:0 40px 100px rgba(0,0,0,0.5)}
.cockpit-view{aspect-ratio:16/9;background:#050505}
.cockpit-controls{padding:24px 32px;display:flex;justify-content:space-between;align-items:flex-end;background:linear-gradient(to top,#0f1117,#0a0a0f)}
.cockpit-title-pnl h1{font-size:1.3rem;margin-bottom:4px;letter-spacing:-0.02em}
.cockpit-artist{color:var(--clr-primary);font-size:0.75rem;font-weight:800;letter-spacing:0.1em}
.cockpit-actions{display:flex;gap:12px}
.cockpit-actions button{padding:8px 16px;border-radius:6px;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;border:1px solid var(--clr-border);color:var(--clr-text-muted);transition:var(--transition)}
.cockpit-actions button:hover{border-color:var(--clr-primary);color:var(--clr-primary)}

@media(max-width:768px){
    .cockpit-controls{flex-direction:column;align-items:flex-start;gap:16px;padding:16px 20px}
}

/* ================================================================
   DASHBOARD / ACCOUNT
   ================================================================ */
.stats-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
.stat-box{background:var(--clr-surface);padding:28px;border-radius:var(--radius-md);text-align:center;border:1px solid var(--clr-border)}
.stat-val{font-size:2rem;color:var(--clr-text-main);margin-bottom:6px}
.stat-lbl{font-size:0.7rem;color:var(--clr-text-muted);text-transform:uppercase;letter-spacing:0.1em}

.panel-card{background:var(--clr-surface);border-radius:var(--radius-md);border:1px solid var(--clr-border);overflow:hidden;margin-bottom:24px}
.panel-header{padding:14px 24px;border-bottom:1px solid var(--clr-border);display:flex;align-items:center;gap:12px}
.panel-title{font-size:0.8rem;color:var(--clr-primary);font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
.panel-body{padding:24px}

.code-item{background:var(--clr-surface);padding:16px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;border-left:4px solid var(--clr-primary);transition:var(--transition);margin-bottom:8px}
.code-item:hover{background:var(--clr-surface-light)}
.code-name{font-weight:900;font-size:0.9rem;color:var(--clr-text-main)}
.code-target{font-size:0.7rem;color:var(--clr-text-muted)}
.role-badge{background:rgba(var(--dept-rgb,13,148,136),0.1);color:var(--clr-primary);padding:6px 14px;border-radius:20px;font-size:0.65rem;font-weight:700;text-transform:uppercase;border:1px solid rgba(var(--dept-rgb,13,148,136),0.2)}

.redeem-form{display:flex;gap:12px;max-width:400px}
.redeem-input{flex-grow:1;background:rgba(0,0,0,0.03);border:1px solid var(--clr-border);padding:12px;color:var(--clr-text-main);border-radius:4px;font-size:0.85rem}
.redeem-btn{background:var(--clr-primary);color:#fff;padding:0 20px;border-radius:4px;font-weight:800;text-transform:uppercase;font-size:0.75rem}

/* ================================================================
   SIDE CART
   ================================================================ */
.side-cart-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:10000;display:none}
.side-cart-overlay.active{display:block}
.side-cart-panel{position:fixed;top:0;right:-400px;width:400px;height:100%;background:var(--clr-bg);z-index:10001;transition:right 0.4s cubic-bezier(0.4,0,0.2,1);border-left:1px solid var(--clr-border);display:flex;flex-direction:column}
.side-cart-panel.active{right:0}
.side-cart-header{padding:var(--sp-md);border-bottom:1px solid var(--clr-border);display:flex;justify-content:space-between;align-items:center}
.side-cart-body{flex-grow:1;overflow-y:auto;padding:var(--sp-md)}
.side-cart-footer{padding:var(--sp-md);border-top:1px solid var(--clr-border)}

@media(max-width:768px){
    .stats-tray{grid-template-columns:1fr}
    .side-cart-panel{width:100%}
}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer{padding:48px 0 24px;border-top:1px solid var(--clr-border);--clr-text-main:var(--clr-invert-text);--clr-text-muted:var(--clr-invert-text-muted);--clr-border:rgba(255,255,255,0.1)}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;margin-bottom:32px}
.footer-brand .footer-title{font-family:var(--font-title);font-size:1.2rem;margin-bottom:8px}
.footer-brand p{font-size:0.75rem;color:var(--clr-text-muted);max-width:280px;line-height:1.6}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--clr-border);color:var(--clr-text-muted);transition:var(--transition)}
.footer-social-icon:hover{color:var(--clr-primary);border-color:var(--clr-primary)}
.footer-links{display:flex;gap:40px}
.footer-links-col h4{font-size:0.65rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--clr-text-muted);margin-bottom:12px}
.footer-links-col a{display:block;font-size:0.8rem;color:var(--clr-text-muted);margin-bottom:8px;transition:var(--transition)}
.footer-links-col a:hover{color:var(--clr-primary)}
.footer-bottom{text-align:center;font-size:0.7rem;color:var(--clr-text-muted);padding-top:24px;border-top:1px solid var(--clr-border)}

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state{text-align:center;padding:48px 24px;background:var(--clr-surface);border-radius:var(--radius-md);border:1px dashed var(--clr-border);grid-column:1/-1}
.empty-state p{font-size:0.85rem;color:var(--clr-text-muted);margin-bottom:12px}

/* ================================================================
   WP OVERRIDES
   ================================================================ */
.wp-block-embed__wrapper{max-width:100%}
.wp-block-embed iframe{max-width:100%}
#wpadminbar{opacity:0.3;transition:opacity 0.3s}
#wpadminbar:hover{opacity:1}

/* ── Sitewide hero background pass-through ── */
/* Make hero/top sections transparent so the header.php ::before bg image shows */
.tcn-arc-hero{background:transparent!important}
.tcn-single-hero{background-color:transparent!important}
.tcn-dept-hero{background:transparent!important}
body:not(.home) .site-main>*:first-child{background-color:transparent!important}

.site-header--scrolled{background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--clr-border)}
.main-nav .menu-item a{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--clr-text-main);text-decoration:none;transition:color .2s}
.main-nav .menu-item a:hover{color:var(--clr-primary)}
.main-nav .menu{display:flex;gap:28px;list-style:none;margin:0;padding:0}

/* ═══════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ═══════════════════════════════════════════════ */
.tcn-bottom-nav {
    display:none; /* hidden on desktop */
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:9999;
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--clr-border);
    padding:6px 0 env(safe-area-inset-bottom, 8px);
    transition:transform .3s ease;
}
@media (max-width:768px) {
    .tcn-bottom-nav { display:flex !important; justify-content:space-around; align-items:center; }
    body { padding-bottom:72px; } /* space for nav */
    .site-footer { padding-bottom:80px; }
}
.tcn-bottom-nav.bnav-hidden { transform:translateY(100%); }
.bnav-item {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:6px 12px; color:var(--muted); text-decoration:none;
    font-size:0.6rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    transition:color .2s;
    -webkit-tap-highlight-color:transparent;
}
.bnav-item svg { transition:all .2s; }
.bnav-item.bnav-active,
.bnav-item:hover { color:var(--clr-primary); }
.bnav-item.bnav-active svg { filter:drop-shadow(0 0 6px rgba(var(--dept-rgb,13,148,136),0.3)); }
.bnav-center-icon {
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg,#0d9488,#00c088);
    display:flex; align-items:center; justify-content:center;
    margin-top:-20px; box-shadow:0 4px 20px rgba(var(--dept-rgb,13,148,136),0.3);
    transition:all .2s;
}
.bnav-center-icon svg { color:#fff; stroke:#fff; }
.bnav-center:hover .bnav-center-icon,
.bnav-center.bnav-active .bnav-center-icon { box-shadow:0 4px 28px rgba(var(--dept-rgb,13,148,136),0.5); transform:scale(1.05); }
.bnav-center span { margin-top:2px; }

/* ═══════════════════════════════════════════════
   PWA INSTALL BANNER
   ═══════════════════════════════════════════════ */
.tcn-install-banner {
    position:fixed; bottom:80px; left:12px; right:12px;
    z-index:10000; animation:slideUp .4s ease;
}
@media (min-width:769px) {
    .tcn-install-banner { bottom:20px; left:auto; right:20px; max-width:360px; }
}
.install-inner {
    display:flex; align-items:center; gap:12px;
    background:rgba(20,26,40,0.96); backdrop-filter:blur(16px);
    border:1px solid rgba(var(--dept-rgb,13,148,136),0.15); border-radius:16px;
    padding:14px 16px; box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.install-icon { width:40px; height:40px; border-radius:10px; }
.install-text { flex:1; display:flex; flex-direction:column; }
.install-text strong { color:#fff; font-size:0.85rem; }
.install-text span { color:rgba(255,255,255,0.5); font-size:0.7rem; }
.install-btn {
    background:var(--clr-invert-bg,#0a0a0a); color:#fff; border:none; border-radius:8px;
    padding:8px 16px; font-weight:800; font-size:0.7rem; letter-spacing:0.06em;
    cursor:pointer; white-space:nowrap;
}
.install-close {
    background:none; border:none; color:rgba(255,255,255,0.4);
    font-size:1.2rem; cursor:pointer; padding:4px;
}
@keyframes slideUp {
    from { transform:translateY(100px); opacity:0; }
    to { transform:translateY(0); opacity:1; }
}

/* ══════════════════════════════════════════════════════════
   WOOCOMMERCE CHECKOUT — Light Theme
   ══════════════════════════════════════════════════════════ */
.woocommerce-checkout .tcn-wc-page {
  /* Widened from 720px (2026-09-12, direct feedback: "id rather you
     extend the width then [than] add a scrollable area") -- the order
     review row's channel + variation tag row needed the extra room to
     fit on one line without a horizontal scrollbar. Widened again,
     900px -> 980px, once a dedicated Qty column (page-checkout.php's
     tcnMoveQuantityToOwnColumn()) ate back into that same room. Cart's
     own .woocommerce-cart .tcn-wc-page keeps the original 720px -- this
     is checkout-only, not a sitewide change. */
  max-width: 980px;
  margin: 0 auto;
  padding: 130px 20px 100px;
}
.woocommerce-checkout .tcn-wc-page-title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 900;
  color: var(--clr-text-main);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  text-align: center;
}
/* WC notices */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
  background: rgba(var(--dept-rgb,13,148,136),0.06) !important;
  border: 1px solid rgba(var(--dept-rgb,13,148,136),0.15) !important;
  border-radius: 10px !important;
  color: var(--clr-text-main) !important;
  padding: 14px 20px 14px 48px !important;
  margin-bottom: 16px !important;
  font-size: 0.85rem;
}
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a {
  color: var(--clr-primary) !important;
  font-weight: 700;
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before {
  color: var(--clr-primary) !important;
}
.woocommerce-checkout .woocommerce-error {
  background: rgba(220,38,38,0.06) !important;
  border: 1px solid rgba(220,38,38,0.2) !important;
  border-radius: 10px !important;
  color: var(--clr-accent) !important;
  padding: 14px 20px !important;
  list-style: none !important;
}
/* Form layout */
.woocommerce-checkout .col2-set {
  display: block !important;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
.woocommerce-checkout h3 {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--clr-primary) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 28px 0 16px !important;
}
.woocommerce-checkout h3:first-child {
  margin-top: 0 !important;
}
/* Input fields */
.woocommerce-checkout .form-row {
  margin-bottom: 14px !important;
  padding: 0 !important;
}
.woocommerce-checkout .form-row label {
  color: var(--clr-text-muted) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.woocommerce-checkout .form-row label .required {
  color: var(--clr-primary) !important;
}
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background: rgba(0,0,0,0.02) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: 8px !important;
  color: var(--clr-text-main) !important;
  padding: 12px 16px !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--clr-primary) !important;
}
.woocommerce-checkout select option {
  background: var(--panel) !important;
  color: var(--clr-text-main) !important;
}
/* Two-column name fields */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  width: 48% !important;
  display: inline-block !important;
  vertical-align: top !important;
}
.woocommerce-checkout .form-row-first { margin-right: 4% !important; }
/* Order review / table */
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-top: 24px !important;
}
.woocommerce-checkout .shop_table {
  border: none !important;
  border-collapse: collapse !important;
  width: 100% !important;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
  border: none !important;
  border-bottom: 1px solid var(--clr-border) !important;
  padding: 12px 0 !important;
  color: var(--clr-text-muted) !important;
  font-size: 0.85rem !important;
}
.woocommerce-checkout .shop_table thead th {
  color: var(--clr-text-muted) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td {
  color: var(--clr-text-main) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  border-bottom: none !important;
}
.woocommerce-checkout .shop_table .amount {
  color: var(--clr-primary) !important;
  font-weight: 800 !important;
}
/* Payment methods */
.woocommerce-checkout #payment {
  background: transparent !important;
  border-radius: 12px !important;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  border: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin-bottom: 8px !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  color: var(--clr-text-main) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.woocommerce-checkout #payment .payment_box {
  background: rgba(0,0,0,0.02) !important;
  color: var(--clr-text-muted) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-top: 10px !important;
  font-size: 0.8rem !important;
}
.woocommerce-checkout #payment .payment_box::before {
  display: none !important;
}
/* Place order button */
.woocommerce-checkout #place_order {
  background: var(--ink) !important;
  color:var(--inverse) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 16px 32px !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  letter-spacing: 0.05em !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.woocommerce-checkout #place_order:hover {
  background: var(--clr-primary) !important;
}
/* WC checkout privacy text */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  color: var(--clr-text-muted) !important;
  font-size: 0.75rem !important;
  margin-bottom: 16px !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
  color: var(--clr-primary) !important;
}
/* Select2 dropdowns (WC uses these for country/state) */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  background: rgba(0,0,0,0.02) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: 8px !important;
  height: auto !important;
  padding: 8px 12px !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--clr-text-main) !important;
  line-height: 1.5 !important;
  padding: 0 !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.select2-dropdown {
  background: var(--panel) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: 8px !important;
}
.select2-results__option {
  color: var(--clr-text-muted) !important;
  padding: 10px 14px !important;
}
.select2-results__option--highlighted {
  background: rgba(var(--dept-rgb,13,148,136),0.1) !important;
  color: var(--clr-text-main) !important;
}
.select2-search--dropdown .select2-search__field {
  background: rgba(0,0,0,0.02) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: 6px !important;
  color: var(--clr-text-main) !important;
  padding: 8px 12px !important;
}
/* Coupon field */
.woocommerce-checkout .checkout_coupon {
  background: var(--clr-surface) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: 10px !important;
  padding: 16px !important;
}
.woocommerce-checkout .checkout_coupon .form-row-first {
  width: 65% !important;
}
.woocommerce-checkout .checkout_coupon .form-row-last {
  width: 30% !important;
}
.woocommerce-checkout .checkout_coupon .button {
  background: var(--ink) !important;
  color:var(--inverse) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
/* WC Cart page similar styling */
.woocommerce-cart .tcn-wc-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 130px 20px 100px;
}
.woocommerce-cart .shop_table {
  border: none !important;
  width: 100% !important;
}
.woocommerce-cart .shop_table th,
.woocommerce-cart .shop_table td {
  border: none !important;
  border-bottom: 1px solid var(--clr-border) !important;
  padding: 14px 8px !important;
  color: var(--clr-text-muted) !important;
}
.woocommerce-cart .button {
  background: var(--ink) !important;
  color:var(--inverse) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════
   SHOP PAGE FIX — hide old Elementor content bleed
   ══════════════════════════════════════════════════ */
.page-id-1473 .site-main {
    position: relative;
}
.page-id-1473 .site-main > .entry-content > *:not(.tsshop-wrap):not(script):not(style) {
    display: none !important;
}
.page-id-1473 .tsshop-wrap {
    position: relative;
    z-index: 2;
    background: var(--clr-bg);
}
.page-id-1473 .site-main::before {
    display: none !important;
}
/* ══════════════════════════════════════════════════
   UNIFIED CARD SYSTEM — Sitewide Type Badges & Layout C
   ══════════════════════════════════════════════════ */

/* ── Color-Coded Type Badges (sitewide, solid fills for legibility on light bg) ── */
.type-badge--video   { background: #0d9488 !important; color: #fff !important; }
.type-badge--audio   { background: #7c3aed !important; color: #fff !important; }
.type-badge--episode { background: var(--panel-2) !important; color: #fff !important; }
.type-badge--article { background: #16a34a !important; color: #fff !important; }
.type-badge--news    { background: #16a34a !important; color: #fff !important; }
.type-badge--code    { background: #db2777 !important; color: #fff !important; }
.type-badge--ticket  { background: var(--ink) !important; color: #fff !important; }
.type-badge--photo   { background: #2563eb !important; color: #fff !important; }
.type-badge--product { background: var(--ink) !important; color: #fff !important; }
.type-badge--drop    { background: #dc2626 !important; color: #fff !important; }
.type-badge--instrumental { background: #7c3aed !important; color: #fff !important; }
.type-badge--ringtone{ background: #2563eb !important; color: #fff !important; }
.type-badge--event   { background: var(--panel-2) !important; color: #fff !important; }
.type-badge--course  { background: #16a34a !important; color: #fff !important; }

/* ── Layout C — Code/Ticket Rows (sitewide) — single-line list, matches /channels/ dpt2-row ── */
.lc-row {
    display: grid;
    grid-template-columns: 52px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--clr-border);
    cursor: pointer;
    transition: background .15s ease;
}
.lc-row:last-child { border-bottom: none; }
.lc-row:hover { background: rgba(var(--dept-rgb,13,148,136),.05); }

.lc-row-thumb {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 10px;
    background-size: cover; background-position: center;
    background-color: rgba(var(--dept-rgb,13,148,136),.08);
    border: 1px solid var(--clr-border);
}

/* ── Anonymous-visitor blur (2026-07-28) ── Gated tracks-with-codes and
   members-only products stay visible in feeds/cards for logged-out
   visitors (so the catalog still feels full), but the artwork is blurred
   so the content itself isn't given away for free. Applied as a plain
   modifier class wherever a thumbnail renders (.lc-row-thumb, .ch-pcc-
   artwork) — each render site adds the class in PHP via a
   !is_user_logged_in() check; this is the one shared rule for all of
   them (do not redefine per-file, this is a truly global, non-duplicated
   component). !important because the artwork already carries other
   filter states (e.g. .ch-offer-locked's grayscale/dim for a logged-in-
   but-not-entitled viewer) that the anon blur should always win over. */
.tcn-anon-blur { filter: blur(9px) saturate(.6) brightness(.92) !important; }

.lc-row-main { min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.lc-row-icon { font-size: .85rem; flex-shrink: 0; }
.lc-row-title {
    font-family:var(--dp-serif);
    font-size: .95rem; color: var(--clr-text-main); text-transform: uppercase;
    letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lc-row-creator {
    font-size: .7rem; font-weight: 800; color: var(--dept-color, var(--clr-primary));
    text-transform: uppercase; letter-spacing: .06em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lc-row-dept {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(var(--dept-rgb,13,148,136),.1);
    border: 1px solid rgba(var(--dept-rgb,13,148,136),.25);
    font-size: .6rem; font-weight: 800; color: var(--dept-color, var(--clr-primary));
    text-transform: uppercase; letter-spacing: .06em;
    padding: 5px 11px; border-radius: 999px;
    white-space: nowrap;
}

.lc-row-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.lc-row-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 10px;
    font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    white-space: nowrap; cursor: pointer; text-decoration: none;
    border: 1px solid var(--clr-border);
    
rgba(255,255,255,.04); color: var(--clr-text-main);
    transition: background .2s, filter .2s, border-color .2s;
}
.lc-row-btn--ghost:hover { background: var(--line); border-color: var(--line); }
.lc-row-btn--primary {
    background: var(--dept-color, var(--clr-primary)); color: #fff; border-color: transparent;
}
.lc-row-btn--primary:hover { filter: brightness(1.1); }
.lc-row-btn--buy {
    background: rgba(var(--dept-rgb,13,148,136),.1); color: var(--dept-color, var(--clr-primary));
    border-color: rgba(var(--dept-rgb,13,148,136),.25); font-weight: 900;
}
.lc-row-btn--buy:hover { background: rgba(var(--dept-rgb,13,148,136),.18); }
.lc-row-btn--owned {
    background: rgba(22,163,74,.08); color: #16a34a; border-color: rgba(22,163,74,.25);
    pointer-events: none;
}

@media (max-width: 640px) {
    .lc-row { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 12px; }
    .lc-row-dept { display: none; }
    .lc-row-thumb { width: 44px; height: 44px; }
}

/* ── Sitewide play-button convention (tcn-modal.js) ──
   Any card's play control should carry .tcn-play-btn plus a
   .tcn-play-icon / .tcn-pause-icon pair — the JS toggles .is-playing
   on click; position/size/color are up to each template's own class. */
.tcn-play-btn .tcn-pause-icon { display: none; }
.tcn-play-btn.is-playing .tcn-play-icon { display: none; }
.tcn-play-btn.is-playing .tcn-pause-icon { display: block; }
.tcn-play-btn.is-disabled { cursor: default; opacity: .4; }
.tcn-play-btn.is-disabled:hover { transform: none !important; }

/* ── Shared full-track player (tcn-modal.js: window.TCNModal.mountFullPlayer) ──
   One reusable player UI for any template with real (uncapped) audio —
   mounted fresh into a container element, so more than one instance can
   exist across different pages without id collisions. */
.tcnp-player {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
}
.tcnp-cover {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.tcnp-body { flex: 1; min-width: 0; }
.tcnp-info { margin-bottom: 6px; }
.tcnp-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--clr-text-main);
    line-height: 1.3;
}
.tcnp-artist {
    font-size: 11px;
    color: var(--clr-text-muted);
}
.tcnp-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tcnp-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--dept-color, var(--clr-primary));
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter .2s;
}
.tcnp-toggle:hover { filter: brightness(1.1); }
.tcnp-time {
    font-size: 11px;
    color: var(--clr-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.tcnp-progress-container {
    flex: 1;
    min-width: 60px;
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
}
.tcnp-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--dept-color, var(--clr-primary));
    border-radius: 3px;
}
.tcnp-volume {
    width: 70px;
    flex-shrink: 0;
    accent-color: var(--dept-color, var(--clr-primary));
}
@media (max-width: 480px) {
    .tcnp-volume { display: none; }
}

/* ── Unified Creator Attribution ── */
.tcn-creator-label {
    font-size: .7rem; font-weight: 700; color: var(--clr-primary);
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 2px;
}
.tcn-dept-label {
    font-size: .6rem; font-weight: 700; color: var(--clr-text-muted);
    text-transform: uppercase; letter-spacing: .1em;
}

/* ================================================================
   UNIFIED SITEWIDE DESIGN SYSTEM
   Applied to channels, departments, and all inner pages
   ================================================================ */

/* ── Department Color Shade System ── */
/* Department colors come from ONE source: tcn_dept_color() in PHP
   (meta tcn_department_color → palette fallback). Templates and the
   wp_head hook in inc/tcn-theme-support.php inject --dept-color and
   --dept-rgb; nothing is hardcoded per-slug here. */
:root {
    /* Defaults when no department context is set (brand teal) */
    --dept-color: #0d9488;
    --dept-rgb: 13,148,136;

    /* Derived shades (light/medium/dark) */
    --dept-shade-light: rgba(var(--dept-rgb), 0.08);
    --dept-shade-medium: rgba(var(--dept-rgb), 0.15);
    --dept-shade-dark: rgba(var(--dept-rgb), 0.25);
}

/* ── Unified Hero Section (sitewide) ── */
.tcn-unified-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--panel-2);
}
.tcn-unified-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(49,49,70,.82) 0%, rgba(49,49,70,.62) 45%, rgba(49,49,70,.32) 100%);
    z-index: 1;
}
.tcn-unified-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
}
.tcn-unified-hero-content {
    position: relative;
    z-index: 2;
    padding: 48px;
    max-width: 800px;
    width: 100%;
}
.tcn-unified-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--dept-color, var(--clr-primary));
    color: #fff;
    margin-bottom: 16px;
}
.tcn-unified-hero-title {
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 12px;
    letter-spacing: 0.02em;
}
.tcn-unified-hero-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin: 0 0 24px;
    max-width: 560px;
}
.tcn-unified-hero-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.tcn-unified-hero-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}
.tcn-unified-hero-stat strong {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}

/* ── Unified Section Headers (sitewide) ── */
.tcn-unified-section {
    padding: clamp(48px, 6vw, 72px) 0;
}
/* Sections used to alternate light-gray/white stripes; the site is now a
   dark canvas throughout, with cards/rows themselves (--clr-surface) as
   the "boxes" that pop — so sections no longer carry their own bg. */
.tcn-unified-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--clr-border);
    flex-wrap: wrap;
}
.tcn-unified-section-tag {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--dept-color, var(--clr-primary));
    text-transform: uppercase;
    margin-bottom: 8px;
}
.tcn-unified-section-title {
    font-family: var(--font-title);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--ink);
    margin: 0;
    letter-spacing: 0;
    text-transform: none;
}
.tcn-unified-section-link {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dept-color, var(--clr-primary));
    white-space: nowrap;
    transition: opacity 0.2s;
}
.tcn-unified-section-link:hover {
    opacity: 0.7;
}

/* ── Unified Content Cards (sitewide) ── */
.tcn-unified-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    transition: border-color 0.2s, transform 0.2s;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
}
.tcn-unified-card:hover {
    border-color: var(--dept-color, var(--clr-primary));
    transform: translateY(-2px);
}
.tcn-unified-card-thumb {
    width: 80px;
    min-height: 80px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--clr-surface-light);
}
.tcn-unified-card-body {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.tcn-unified-card-title {
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--clr-text-main);
    margin: 0 0 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tcn-unified-card-meta {
    font-size: 0.6rem;
    color: var(--clr-text-muted);
}

/* ── Unified Channel List Rows (sitewide) ── */
.tcn-unified-channel-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tcn-unified-channel-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 10px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s, border-color 0.2s;
}
.tcn-unified-channel-row:hover {
    background: var(--clr-surface-light);
    border-color: var(--dept-color, var(--clr-primary-soft-border));
}
.tcn-unified-channel-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--dept-color, var(--clr-primary-soft-border));
}
.tcn-unified-channel-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--dept-color, var(--clr-primary-soft));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    border: 2px solid var(--dept-color, var(--clr-primary-soft-border));
}
.tcn-unified-channel-info {
    flex: 1;
    min-width: 0;
}
.tcn-unified-channel-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--clr-text-main);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 2px;
}
.tcn-unified-channel-dept {
    font-size: 0.65rem;
    color: var(--dept-color, var(--clr-primary));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.tcn-unified-channel-chevron {
    color: var(--clr-text-muted);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: color 0.2s;
}
.tcn-unified-channel-row:hover .tcn-unified-channel-chevron {
    color: var(--dept-color, var(--clr-primary));
}

/* ── Unified Sidebar Navigation (sitewide) ── */
.tcn-unified-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tcn-unified-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
}
.tcn-unified-sidebar-item:hover {
    background: var(--clr-surface-light);
}
.tcn-unified-sidebar-item.active {
    background: var(--dept-color, var(--clr-primary-soft));
    border-color: var(--dept-color, var(--clr-primary-soft-border));
    color: #fff;
}
.tcn-unified-sidebar-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--clr-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--dept-color, var(--clr-primary));
}
.tcn-unified-sidebar-item.active .tcn-unified-sidebar-icon {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.tcn-unified-sidebar-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tcn-unified-sidebar-item.active .tcn-unified-sidebar-name {
    color: #fff;
}
.tcn-unified-sidebar-desc {
    font-size: 0.7rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.tcn-unified-sidebar-item.active .tcn-unified-sidebar-desc {
    color: rgba(255,255,255,0.7);
}

/* ── Unified CTA Banner (sitewide) ── */
.tcn-unified-cta {
    padding: clamp(48px, 6vw, 72px) 0;
    background: var(--clr-invert-bg);
}
.tcn-unified-cta-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding: 0 24px;
}
.tcn-unified-cta-left {
    flex: 1;
    min-width: 280px;
}
.tcn-unified-cta-tag {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: var(--clr-primary-tint);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.tcn-unified-cta-heading {
    font-family: var(--font-title);
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    color: var(--ink);
    margin: 0 0 12px;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}
.tcn-unified-cta-desc {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.7;
    max-width: 420px;
    margin: 0 0 24px;
}
.tcn-unified-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--panel);
    color:var(--ink);
    padding: 13px 28px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    transition: opacity 0.2s;
    text-decoration: none;
    cursor: pointer;
    border: none;
}
.tcn-unified-cta-btn:hover {
    opacity: 0.88;
}

/* ── Responsive Grid for Cards ── */
.tcn-unified-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .tcn-unified-hero-content { padding: 32px 20px; }
    .tcn-unified-hero { min-height: 260px; }
    .tcn-unified-section-header { flex-direction: column; align-items: flex-start; }
    .tcn-unified-grid { grid-template-columns: 1fr; }
    .tcn-unified-sidebar { position: static; flex-direction: row; overflow-x: auto; gap: 8px; }
    .tcn-unified-sidebar-item { flex-shrink: 0; padding: 10px 14px; }
    .tcn-unified-sidebar-desc { display: none; }
}

/* ================================================================
   SHARED COMPONENT LIBRARY
   Unified design system for all pages (departments, channels, gain access)
   ================================================================ */

/* ── Page Hero ── */
.tcn-page-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-color: var(--clr-invert-bg);
    overflow: hidden;
}
.tcn-page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(13,15,39,.82) 0%, rgba(13,15,39,.62) 45%, rgba(13,15,39,.32) 100%);
    z-index: 1;
}
.tcn-page-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(32px, 5vw, 56px) 0;
}
.tcn-page-hero__eyebrow {
    display: inline-block;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--clr-primary-tint);
    padding: 6px 14px;
    border: 1px solid rgba(var(--dept-rgb,13,148,136),.25);
    border-radius: 999px;
    background: rgba(var(--dept-rgb,13,148,136),.08);
    margin-bottom: 16px;
}
.tcn-page-hero__title {
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.15;
    text-transform: uppercase;
}
.tcn-page-hero__title span { color: var(--clr-primary-tint); }
.tcn-page-hero__sub {
    font-size: 1rem;
    color: rgba(255,255,255,.72);
    max-width: 560px;
    margin: 0;
    line-height: 1.6;
}
.tcn-page-hero__stats {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.tcn-page-hero__stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.tcn-page-hero__stat-num {
    font-family: var(--font-title);
    font-size: 1rem;
    color: #fff;
}
.tcn-page-hero__stat-label {
    font-size: .8rem;
    color: rgba(255,255,255,.55);
}

/* ── Section ── */
.tcn-page-section {
    padding: clamp(48px, 6vw, 72px) 0;
}
.tcn-page-section--surface {
    background: var(--clr-surface);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}
.tcn-page-section__header {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--clr-border);
}
.tcn-page-section__tag {
    display: block;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .22em;
    color: var(--clr-primary);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.tcn-page-section__title {
    font-family: var(--font-title);
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    color: var(--clr-text-main);
    margin: 0 0 6px;
}
.tcn-page-section__sub {
    color: var(--clr-text-muted);
    font-size: .85rem;
    max-width: 560px;
    margin: 0;
    line-height: 1.6;
}

/* ── Sidebar Layout ── */
.tcn-sidebar-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px var(--sp-lg) 80px;
}
.tcn-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 16px);
    align-self: start;
    max-height: calc(100vh - var(--header-height) - 32px);
    overflow-y: auto;
    padding-right: 8px;
}
.tcn-sidebar::-webkit-scrollbar { width: 3px; }
.tcn-sidebar::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 3px; }
.tcn-sidebar__back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    text-decoration: none;
    margin-bottom: 20px;
    padding: 8px 0;
    transition: color .2s;
}
.tcn-sidebar__back:hover { color: var(--clr-primary); }
.tcn-sidebar__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--clr-text-main);
    font-size: .85rem;
    font-weight: 600;
    transition: all .2s;
    border: 1px solid transparent;
}
.tcn-sidebar__item:hover {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}
.tcn-sidebar__item.active {
    background: var(--clr-primary);
    color: #fff;
    border-color: var(--clr-primary);
}
.tcn-sidebar__item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.tcn-sidebar__item-count {
    margin-left: auto;
    font-size: .7rem;
    font-weight: 700;
    color: var(--clr-text-muted);
    background: var(--clr-surface-light);
    padding: 2px 8px;
    border-radius: 12px;
}
.tcn-sidebar__item.active .tcn-sidebar__item-count {
    background: rgba(255,255,255,.2);
    color: #fff;
}

/* ── Card System ── */
.tcn-pcard {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.tcn-pcard:hover {
    border-color: rgba(var(--dept-rgb,13,148,136),.35);
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.tcn-pcard__thumb {
    width: 90px;
    min-height: 90px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--clr-surface-light);
}
.tcn-pcard__body {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.tcn-pcard__type {
    display: inline-block;
    font-size: .58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    align-self: flex-start;
}
.tcn-pcard__title {
    font-weight: 700;
    font-size: .85rem;
    color: var(--clr-text-main);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tcn-pcard__meta {
    font-size: .7rem;
    color: var(--clr-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tcn-pcard__price {
    font-weight: 700;
    color: var(--clr-primary);
}

/* ── Card Grid ── */
.tcn-pcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

/* ── Channel Row ── */
.tcn-ch-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s;
}
.tcn-ch-row:hover { border-color: var(--dept-color, var(--clr-primary)); }
.tcn-ch-row__avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--clr-surface-light);
    flex-shrink: 0;
}
.tcn-ch-row__info { flex: 1; min-width: 0; }
.tcn-ch-row__name {
    font-weight: 700;
    font-size: .88rem;
    color: var(--clr-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tcn-ch-row__dept {
    font-size: .7rem;
    color: var(--clr-text-muted);
}
.tcn-ch-row__chevron {
    color: var(--clr-text-muted);
    flex-shrink: 0;
}

/* ── Button System ── */
.tcn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all .2s;
}
.tcn-btn:active { transform: scale(.98); }
.tcn-btn--primary {
    background: var(--clr-invert-bg);
    color: var(--clr-invert-text);
}
.tcn-btn--primary:hover { background: var(--clr-primary); }
.tcn-btn--ghost {
    background: transparent;
    color: var(--clr-text-main);
    border: 1px solid var(--line);
}
.tcn-btn--ghost:hover { border-color: var(--clr-text-main); }
.tcn-btn--teal {
    background: var(--clr-primary);
    color: #fff;
}
.tcn-btn--teal:hover { background: #0f766e; }
.tcn-btn--sm {
    padding: 8px 16px;
    font-size: .7rem;
}
.tcn-btn--lg {
    padding: 16px 36px;
    font-size: .88rem;
}

/* ── Stat Bar ── */
.tcn-statbar {
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-surface);
}
.tcn-statbar__inner {
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding: 20px 24px;
    flex-wrap: wrap;
    gap: 8px 40px;
}
.tcn-statbar__item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.tcn-statbar__num {
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--clr-text-main);
}
.tcn-statbar__label {
    font-size: .8rem;
    color: var(--clr-text-muted);
}

/* ── CTA Banner ── */
.tcn-cta-banner {
    padding: clamp(48px, 6vw, 72px) 0;
    background: var(--clr-surface);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}
.tcn-cta-banner__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 24px;
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    background: var(--clr-bg);
}
.tcn-cta-banner__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--clr-primary-soft);
    border: 1px solid var(--clr-primary-soft-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.tcn-cta-banner__text { flex: 1; }
.tcn-cta-banner__title {
    font-family: var(--font-title);
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--clr-text-main);
    margin: 0 0 4px;
}
.tcn-cta-banner__sub {
    color: var(--clr-text-muted);
    font-size: .85rem;
    margin: 0;
}

/* ── Creator CTA (dark section) ── */
.tcn-creator-cta {
    padding: 64px 5vw;
    background: var(--clr-invert-bg);
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}
.tcn-creator-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.tcn-creator-cta__title {
    font-family: var(--font-title);
    font-size: clamp(1.1rem, 2.4vw, 1.6rem);
    color: #fff;
    margin: 0 0 8px;
}
.tcn-creator-cta__sub {
    color: var(--muted);
    font-size: .85rem;
    margin: 0;
    max-width: 480px;
}
.tcn-creator-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--panel);
    color: var(--clr-invert-bg);
    padding: 13px 28px;
    border-radius: 8px;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .05em;
    text-decoration: none;
    transition: opacity .2s;
}
.tcn-creator-cta__btn:hover { opacity: .88; }

/* ── Code Card (Gain Access style) ── */
.tcn-code-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 14px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: all .3s;
}
.tcn-code-card:hover {
    border-color: var(--clr-primary-soft-border);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.tcn-code-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-accent), var(--clr-primary));
    opacity: .6;
}

/* ── Empty State ── */
.tcn-empty {
    text-align: center;
    padding: 60px 24px;
    background: var(--clr-surface);
    border: 1px dashed var(--clr-border);
    border-radius: 14px;
}
.tcn-empty__icon {
    font-size: 2.4rem;
    margin-bottom: 12px;
}
.tcn-empty__title {
    font-family: var(--font-title);
    font-size: 1.1rem;
    color: var(--clr-text-main);
    margin: 0 0 8px;
}
.tcn-empty__sub {
    color: var(--clr-text-muted);
    font-size: .85rem;
    margin: 0 0 20px;
    max-width: 400px;
    margin-inline: auto;
    line-height: 1.6;
}

/* ── Tab Pills ── */
.tcn-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--clr-border);
}
.tcn-tab {
    background: var(--clr-surface-light);
    border: 1px solid var(--clr-border);
    color: var(--clr-text-muted);
    font-size: .78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.tcn-tab:hover {
    background: var(--clr-primary-soft);
    border-color: var(--clr-primary-soft-border);
    color: var(--clr-text-main);
}
.tcn-tab.active {
    background: var(--clr-primary-soft);
    border-color: var(--clr-primary-soft-border);
    color: var(--clr-primary);
}

/* ── Lockdown Overlay ── */
.tcn-lockdown {
    position: fixed;
    inset: 0;
    
rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tcn-lockdown__box {
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    padding: 48px 40px;
    max-width: 440px;
    text-align: center;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .tcn-sidebar-layout {
        grid-template-columns: 1fr;
        padding: 24px var(--sp-md) 60px;
    }
    .tcn-sidebar {
        position: static;
        display: flex;
        overflow-x: auto;
        gap: 8px;
        max-height: none;
        padding-bottom: 8px;
    }
    .tcn-sidebar__item { flex-shrink: 0; padding: 10px 14px; }
    .tcn-sidebar__item-desc { display: none; }
    .tcn-page-hero { min-height: 260px; }
    .tcn-pcard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .tcn-cta-banner__inner { flex-direction: column; text-align: center; }
    .tcn-creator-cta__inner { flex-direction: column; text-align: center; }
}

/* ================================================================
   CREATOR APPLY MODAL — Shared component
   Used by: archive-tcn_department, single-tcn_department
   ================================================================ */
.creator-modal-inner{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-lg);padding:48px 40px;max-width:580px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.5);margin:auto}
.creator-modal-close{position:absolute;top:14px;right:18px;background:none;border:none;color:var(--clr-text-muted);font-size:1.6rem;cursor:pointer;line-height:1;transition:color .2s}.creator-modal-close:hover{color:var(--clr-text-main)}
.creator-modal-icon{width:64px;height:64px;background:var(--clr-primary-soft);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.creator-modal-title{font-family:var(--font-display,'Dela Gothic One',sans-serif);font-size:1.3rem;color:var(--clr-text-main);text-align:center;margin:0 0 8px}
.creator-modal-sub{color:var(--clr-text-muted);font-size:.9rem;text-align:center;line-height:1.6;margin:0 0 24px}
.creator-step{display:none}.creator-step.active{display:block}
.creator-dept-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.creator-dept-option{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:20px 16px;cursor:pointer;text-align:center;transition:border-color .2s,background .2s;display:flex;flex-direction:column;align-items:center;gap:6px}
.creator-dept-option:hover{border-color:var(--clr-primary-soft-border);background:var(--clr-primary-soft)}
.creator-dept-option.selected{border-color:var(--clr-primary);background:var(--clr-primary-soft)}
.creator-dept-option.coming-soon{opacity:.4;cursor:default}
.creator-dept-emoji{font-size:1.8rem}
.creator-dept-name{font-weight:700;font-size:.8rem;color:var(--clr-text-main);letter-spacing:.03em}
.creator-dept-badge{font-size:.55rem;font-weight:800;letter-spacing:.1em;padding:2px 8px;border-radius:var(--radius-sm);background:var(--clr-surface-light);color:var(--clr-text-muted)}
.creator-dept-badge.active{background:var(--clr-surface-light);color:var(--clr-primary)}
.creator-back-btn{background:none;border:none;color:var(--clr-text-muted);font-size:.8rem;cursor:pointer;margin-bottom:16px;padding:0}.creator-back-btn:hover{color:var(--clr-text-main)}
.creator-auth-preview{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:16px 20px}
.creator-auth-preview-item{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--clr-text-main);font-weight:500}
.creator-auth-icon{font-size:1.1rem;width:24px;text-align:center}
.creator-auth-label{flex:1}
.creator-auth-buttons{display:flex;gap:12px;margin-top:8px}
.creator-auth-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:var(--radius-md);font-family:var(--font-display,'Dela Gothic One',sans-serif);font-size:.85rem;font-weight:400;letter-spacing:.02em;text-decoration:none;transition:background .15s,border-color .15s}
.creator-auth-btn--login{background:var(--clr-surface-light);border:1px solid var(--clr-border);color:var(--clr-text-main)}
.creator-auth-btn--login:hover{border-color:var(--clr-primary)}
.creator-auth-btn--register{background:var(--clr-primary);color:#fff;border:none}
.creator-auth-btn--register:hover{background:var(--clr-text-main)}
.creator-form-group{margin-bottom:16px}
.creator-form-group label{display:block;font-size:.6rem;font-weight:800;letter-spacing:.12em;color:var(--clr-text-muted);margin-bottom:6px}
.creator-form-group input[type="text"],.creator-form-group input[type="email"]{width:100%;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:12px 16px;color:var(--clr-text-main);font-size:.9rem;outline:none;transition:border-color .2s;box-sizing:border-box}
.creator-form-group input:focus{border-color:var(--clr-primary)}
.creator-username-wrap{display:flex;align-items:center;gap:2px;background:var(--clr-primary-soft);border:1px solid var(--clr-primary-soft-border);border-radius:var(--radius-sm);padding:12px 14px;transition:border-color .2s}
.creator-username-wrap:focus-within{border-color:var(--clr-primary)}
.creator-preview-label{flex-shrink:0;font-size:.8rem;font-weight:800;letter-spacing:.01em;color:var(--clr-text-muted);white-space:nowrap}
.creator-username-wrap input#creator-username{flex:1;min-width:0;background:transparent;border:none;outline:none;padding:0;font-family:var(--font-display,'Dela Gothic One',sans-serif);font-size:.9rem;color:var(--clr-primary)}
.creator-username-wrap input#creator-username::placeholder{font-family:inherit;color:var(--clr-primary);opacity:.45}
.creator-username-status{flex-shrink:0;display:flex;align-items:center;margin-left:4px}
.creator-card-element{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:12px 16px}
.creator-card-errors{color:var(--clr-error,#dc2626);font-size:.75rem;margin-top:6px;min-height:16px}
.creator-submit-btn{width:100%;padding:14px;border:none;border-radius:var(--radius-md);background:var(--clr-primary);color:#fff;font-family:var(--font-display,'Dela Gothic One',sans-serif);font-size:.85rem;font-weight:400;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:.02em;transition:background .2s}
.creator-submit-btn:hover:not(:disabled){background:var(--clr-text-main)}
.creator-submit-btn:disabled{opacity:.35;cursor:default}
.creator-form-note{text-align:center;font-size:.75rem;color:var(--clr-text-muted);margin-top:12px}
.creator-plan-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 20px}
.creator-plan-tab{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:10px 6px;cursor:pointer;transition:border-color .2s,background .2s}
.creator-plan-tab:hover{border-color:var(--clr-primary-soft-border)}
.creator-plan-tab.active{border-color:var(--clr-primary);background:var(--clr-primary-soft)}
.creator-plan-tab-name{font-family:var(--font-display,'Dela Gothic One',sans-serif);font-size:.72rem;color:var(--clr-text-main);letter-spacing:.01em}
.creator-plan-tab-price{font-size:.7rem;color:var(--clr-text-muted)}
.creator-plan-tab.active .creator-plan-tab-price{color:var(--clr-primary)}
.creator-plan-compare{text-align:center;font-size:.75rem;margin:-8px 0 20px}
.creator-plan-compare a{color:var(--clr-text-muted);text-decoration:underline;text-underline-offset:2px}
.creator-plan-compare a:hover{color:var(--clr-primary)}
.creator-redeem-box{margin-bottom:20px;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md);padding:16px 18px}
.creator-redeem-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.creator-redeem-header svg{flex-shrink:0}
.creator-redeem-header span{font-family:var(--font-display,'Dela Gothic One',sans-serif);font-size:.75rem;letter-spacing:.02em;color:var(--clr-text-main)}
.creator-redeem-row{display:flex;gap:8px}
.creator-redeem-row input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--clr-border);border-radius:var(--radius-sm);padding:12px 16px;color:var(--clr-text-main);font-size:.9rem;outline:none;transition:border-color .2s;box-sizing:border-box;text-transform:uppercase}
.creator-redeem-row input:focus{border-color:var(--clr-primary)}
.creator-redeem-row button{flex-shrink:0;background:var(--clr-text-main);color:var(--inverse);border:none;border-radius:var(--radius-sm);padding:0 20px;font-family:var(--font-display,'Dela Gothic One',sans-serif);font-size:.8rem;font-weight:400;cursor:pointer;transition:background .2s}
.creator-redeem-row button:hover:not(:disabled){background:var(--clr-primary)}
.creator-redeem-row button:disabled{opacity:.6;cursor:default}
.creator-redeem-msg{font-size:.8rem;margin-top:8px;font-weight:600}
.creator-redeem-msg.is-success{color:var(--clr-primary)}
.creator-redeem-msg.is-error{color:var(--clr-error,#dc2626)}
.creator-redeem-hint{font-size:.72rem;color:var(--clr-text-muted);margin:8px 0 0}
.creator-redeem-hint a{color:var(--clr-primary)}
.creator-divider{display:flex;align-items:center;gap:12px;margin:0 0 20px;color:var(--clr-text-muted);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.creator-divider::before,.creator-divider::after{content:'';flex:1;height:1px;background:var(--clr-border)}
@media(max-width:480px){.creator-auth-buttons{flex-direction:column}}
@media(max-width:600px){.creator-modal-inner{padding:28px 20px}.creator-dept-grid{grid-template-columns:repeat(2,1fr)}}

/* ================================================================
   PREMIUM EDITORIAL SYSTEM — sitewide, extracted from front-page.php
   Same visual language everywhere (blob glow, dot-grid texture,
   hover-lift accent cards, dashed connectors, gradient pills/buttons),
   but color comes from --accent (defaults to --dept-color) instead of
   the homepage's fixed purple/teal/blue — so every department/channel
   page blends into ITS OWN color automatically. Homepage keeps setting
   --accent explicitly per-card for its 3-hue story; everywhere else,
   just don't set --accent and it inherits the page's --dept-color.
   Used by: front-page.php, page-gainaccess.php, inc/tcn-dpt2-showcase.php
   (departments hub + /channels/), single-tcn_channel.php.
   ================================================================ */
:root{
    --accent: var(--dept-color, var(--clr-primary));
    --accent-rgb: var(--dept-rgb, 13,148,136);
    --accent-gradient: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #12c48b));
}

.tcn-pill{display:inline-flex;padding:7px 18px;border-radius:999px;background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.28);color:var(--accent);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.tcn-eyebrow{display:block;font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);text-align:center;margin:0 0 14px}
.tcn-grad-text{background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.tcn-headline{font-family:var(--font-title);font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:-.01em;text-transform:none;text-align:center;color: var(--ink);margin:0 0 52px}

/* Blob-glow background — drop as the first child of a `position:relative;overflow:hidden` hero */
/* Same fixed purple/teal/blue blend as the homepage hero (.fp-hero-sales__blobs)
   — this is now the one sitewide hero color scheme (departments, channels,
   gain access), not a per-department tint, so every hero reads consistently
   with the homepage regardless of which department/channel it belongs to. */
.tcn-blob-veil{position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(circle at 12% 22%, rgba(139,92,246,.28), transparent 45%),
        radial-gradient(circle at 88% 12%, rgba(18,196,139,.30), transparent 50%),
        radial-gradient(circle at 75% 88%, rgba(59,130,246,.20), transparent 55%);
}
/* Dot-grid texture — same placement rules as .tcn-blob-veil, layer both for a hero */
.tcn-dotgrid-veil{position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(to right, rgba(10,10,10,.05) 1px, transparent 1px),linear-gradient(to bottom, rgba(10,10,10,.05) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 75%);
    mask-image:radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 75%);
}

/* Hover-lift accent card — icon rotates/scales, top bar wipes in, dashed tag footer */
.tcn-lift-card{position:relative;background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:var(--radius-lg);padding:32px 28px 30px;overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.tcn-lift-card::before{content:'';position:absolute;left:28px;right:28px;top:0;height:3px;background:var(--accent);border-radius:0 0 3px 3px;transform:scaleX(.16);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tcn-lift-card::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:var(--radius-lg);background:radial-gradient(90% 60% at 0% 0%, rgba(var(--accent-rgb),.10), transparent 70%);opacity:0;transition:opacity .5s}
.tcn-lift-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.08);border-color:rgba(var(--accent-rgb),.3)}
.tcn-lift-card:hover::before{transform:scaleX(1)}
.tcn-lift-card:hover::after{opacity:1}
.tcn-lift-card__icon{width:44px;height:44px;border-radius:12px;background:rgba(var(--accent-rgb),.14);display:flex;align-items:center;justify-content:center;color:var(--accent);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .35s}
.tcn-lift-card:hover .tcn-lift-card__icon{transform:rotate(-6deg) scale(1.06);background:rgba(var(--accent-rgb),.22)}
.tcn-lift-card__tag{margin-top:22px;padding-top:16px;border-top:1px dashed var(--clr-border);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color: var(--ink)}
.tcn-lift-card__tag b{color:var(--accent);font-weight:800}
.tcn-lift-card__title{font-family:var(--font-title);font-size:1rem;text-transform:none;color: var(--ink);margin:18px 0 8px}
.tcn-lift-card__desc{font-size:.87rem;line-height:1.6;color: var(--muted);margin:0}

/* ================================================================
   Offering funnel kit — hero band, numbered-benefit grid, FAQ
   accordion. Built for tcn_render_offer_hero() / tcn_render_lift_grid()
   / tcn_render_faq_accordion() in inc/tcn-offer-sections.php, so any
   single-item "offering" page (event, product, etc.) can drop in the
   same clean, sectioned structure without re-authoring CSS per page.
   Colors always resolve through --dept-color/--accent, never a fixed
   hue, so every offering still reads in ITS OWN department's color.
   ================================================================ */
.dpt2-detail-hero{position:relative;overflow:hidden;margin-top:calc(-1 * var(--header-height));padding:calc(64px + var(--header-height)) var(--sp-lg) 48px;background:var(--clr-bg)}
.dpt2-detail-hero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at top, rgba(var(--dept-rgb,18,196,139),.10), transparent 60%)}
.dpt2-detail-hero-inner{position:relative;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.dpt2-badge-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dpt2-badge{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--dept-color,#0d9488);background:rgba(var(--dept-rgb,13,148,136),.10);border:1px solid rgba(var(--dept-rgb,13,148,136),.28);border-radius:999px;padding:5px 11px}
.dpt2-detail-title{font-family:var(--dp-serif);font-size:clamp(32px,5vw,56px);line-height:.95;margin:0;color:var(--dept-color,#0d9488)}

.tcn-lift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1120px;margin:0 auto}
@media (max-width:900px){.tcn-lift-grid{grid-template-columns:1fr}}

.tcn-faq{padding:64px var(--sp-lg);max-width:760px;margin:0 auto}
.tcn-faq-title{font-family:var(--font-title);font-size:clamp(1.4rem,2.6vw,1.9rem);text-transform:none;text-align:center;color: var(--ink);margin:0 0 28px}
.tcn-faq-list{display:flex;flex-direction:column}
.tcn-faq-item{border-bottom:1px solid rgba(255,255,255,.12);transition:background .2s}
.tcn-faq-item:first-child{border-top:1px solid rgba(255,255,255,.12)}
.tcn-faq-item:hover{background:rgba(var(--accent-rgb,13,148,136),.06)}
.tcn-faq-item.open{background:rgba(var(--accent-rgb,13,148,136),.08)}
.tcn-faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:1.1rem 0;background:none;border:none;text-align:left;font-size:.95rem;font-weight:700;color: var(--ink);cursor:pointer;transition:color .2s}
.tcn-faq-q:hover{color:var(--accent)}
.tcn-faq-arrow{flex-shrink:0;font-size:.65rem;color: var(--muted);transition:transform .25s}
.tcn-faq-item.open .tcn-faq-arrow{transform:rotate(180deg)}
.tcn-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.tcn-faq-item.open .tcn-faq-a{max-height:300px;padding:0 0 1.25rem}
.tcn-faq-a p{margin:0;font-size:.88rem;line-height:1.65;color: var(--muted)}

/* Generic spec/meta grid — same look as single-product.php's own
   .tcn-prod-meta-grid, generalized so single-tcn_event.php (and any other
   offering page) can use it without a per-template copy. */
.tcn-meta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding:22px;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius-md)}
.tcn-meta-item{display:flex;flex-direction:column;gap:4px}
.tcn-meta-label{font-size:.6rem;font-weight:800;color:var(--clr-text-muted);letter-spacing:.1em;text-transform:uppercase}
.tcn-meta-value{color:var(--clr-text-main);font-size:.9rem;font-weight:700}

/* Dashed connector — for a horizontal step sequence, position:relative on the row */
.tcn-dash-connector{position:absolute;top:18px;left:calc(16.66% + 10px);right:calc(16.66% + 10px);height:2px;
    background-image:linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent) 40%, #3b82f6));
    -webkit-mask-image:repeating-linear-gradient(to right, black 0 6px, transparent 6px 14px);
    mask-image:repeating-linear-gradient(to right, black 0 6px, transparent 6px 14px);
}

.tcn-grad-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;background:var(--accent-gradient);color:#fff;font-family:var(--font-title);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;padding:13px 28px;border-radius:var(--radius-md);cursor:pointer;text-decoration:none;transition:filter .2s,transform .2s}
.tcn-grad-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}