main.container {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-xl);
}

.cw-samples-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    min-height: clamp(220px, 26vw, 290px);
    margin: 0 auto 10px;
    padding: clamp(12px, 1.9vw, 18px);
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
    background:
        linear-gradient(90deg, var(--bg-primary) 0%, rgba(11, 13, 15, 0) 7%, rgba(11, 13, 15, 0) 93%, var(--bg-primary) 100%),
        linear-gradient(0deg, rgba(11, 13, 15, 0.16), rgba(11, 13, 15, 0.16)),
        url("../../media/panorama/sample_hero.webp") center center / cover no-repeat;
}

.cw-samples-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        90deg,
        rgba(1, 2, 3, 0.95) 0%,
        rgba(4, 6, 8, 0.88) 30%,
        rgba(7, 10, 13, 0.63) 52%,
        rgba(9, 12, 15, 0.28) 72%,
        rgba(11, 13, 15, 0) 90%
    );
    pointer-events: none;
}

.cw-samples-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(
        circle at 87% 43%,
        rgba(255, 255, 255, 0.19) 0%,
        rgba(255, 255, 255, 0.07) 23%,
        rgba(255, 255, 255, 0) 54%
    );
    pointer-events: none;
}

body.light-mode .cw-samples-hero {
    background:
        linear-gradient(90deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0) 7%, rgba(255, 255, 255, 0) 93%, var(--bg-primary) 100%),
        linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
        url("../../media/panorama/sample_hero.webp") center center / cover no-repeat;
}

body.light-mode .cw-samples-hero::before {
    background: linear-gradient(
        90deg,
        rgba(252, 254, 255, 0.96) 0%,
        rgba(248, 252, 255, 0.88) 32%,
        rgba(244, 249, 253, 0.66) 54%,
        rgba(241, 247, 252, 0.3) 74%,
        rgba(241, 247, 252, 0) 90%
    );
}

body.light-mode .cw-samples-hero::after {
    background: radial-gradient(
        circle at 87% 43%,
        rgba(0, 168, 150, 0.26) 0%,
        rgba(0, 168, 150, 0.11) 22%,
        rgba(0, 168, 150, 0) 52%
    );
}

.cw-samples-hero-copy {
    position: relative;
    z-index: 1;
    max-width: min(68ch, 60%);
}

.cw-samples-kicker {
    margin: 0 0 6px;
    color: var(--cw-teal);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cw-samples-hero h1 {
    margin: 0 0 8px;
    max-width: 26ch;
    font-size: clamp(1.45rem, 2.25vw, 2.15rem);
    line-height: 1.08;
    text-wrap: balance;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

.cw-samples-hero p {
    margin: 0 0 10px;
    max-width: 60ch;
    font-size: 0.84rem;
    color: color-mix(in srgb, var(--text-secondary) 92%, #ffffff);
    line-height: 1.48;
    text-wrap: pretty;
}

body.light-mode .cw-samples-hero p {
    color: var(--text-secondary);
}

.cw-samples-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 0;
}

.cw-samples-stat {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 9px;
    background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
}

.cw-samples-stat strong {
    display: block;
    font-size: 0.96rem;
    color: var(--cw-teal);
    line-height: 1.2;
}

.cw-samples-stat span {
    display: block;
    margin-top: 2px;
    font-size: 0.66rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.cw-samples-hero-credit {
    position: absolute;
    right: 10px;
    bottom: 6px;
    margin: 0;
    z-index: 1;
    font-size: 0.31rem;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--text-primary) 88%, #ffffff);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.42);
    opacity: 0.52;
    pointer-events: none;
    user-select: none;
}

body.light-mode .cw-samples-hero-credit {
    color: color-mix(in srgb, var(--text-secondary) 86%, #ffffff);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.5);
}

.cw-samples-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 8px;
}

.cw-samples-tabs .btn {
    padding: 7px 12px;
    font-size: 0.78rem;
    border-radius: 8px;
}

.cw-samples-tabs .btn.is-active {
    border-color: color-mix(in srgb, var(--cw-teal) 60%, var(--border-color));
    color: var(--cw-teal);
    background: color-mix(in srgb, var(--cw-teal) 10%, transparent);
}

.cw-samples-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.cw-sample-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-secondary) 84%, transparent);
    display: grid;
    gap: 0;
    position: relative;
    transition: transform 0.24s ease, background 0.24s ease;
}

.cw-sample-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--cw-teal), transparent 70%);
    opacity: 0.9;
}

.cw-sample-card:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--bg-secondary) 76%, var(--cw-teal) 7%);
}

.cw-sample-card-media {
    aspect-ratio: 16 / 8;
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    overflow: hidden;
}

.cw-sample-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cw-sample-card-body {
    display: grid;
    gap: 6px;
    padding: 8px;
}

.cw-sample-card-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cw-sample-card-kicker span {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cw-teal) 36%, var(--border-color));
    background: color-mix(in srgb, var(--cw-teal) 10%, transparent);
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1;
}

.cw-sample-card h2 {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.cw-sample-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.cw-sample-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    color: var(--text-muted);
    font-size: 0.62rem;
    line-height: 1.3;
}

.cw-sample-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.cw-sample-card-actions .btn {
    padding: 6px 10px;
    font-size: 0.7rem;
    border-radius: 7px;
}

.cw-sample-card-price {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--cw-teal);
}

.cw-samples-empty {
    padding: 14px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-secondary) 76%, transparent);
    font-size: 0.82rem;
}

.cw-samples-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}

.cw-samples-pagination .btn {
    padding: 7px 12px;
    font-size: 0.76rem;
    border-radius: 8px;
}

.cw-samples-pagination .btn.is-active {
    border-color: color-mix(in srgb, var(--cw-teal) 60%, var(--border-color));
    color: var(--cw-teal);
    background: color-mix(in srgb, var(--cw-teal) 10%, transparent);
    pointer-events: none;
}

@media (max-width: 1320px) {
    .cw-samples-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .cw-samples-hero-copy {
        max-width: min(72ch, 84%);
    }

    .cw-samples-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .cw-samples-hero {
        min-height: 220px;
        padding: 12px 10px;
        background-position: 78% center;
    }

    .cw-samples-hero::before {
        background: linear-gradient(
            90deg,
            rgba(1, 2, 3, 0.96) 0%,
            rgba(3, 5, 8, 0.9) 34%,
            rgba(5, 8, 11, 0.82) 60%,
            rgba(7, 10, 14, 0.66) 80%,
            rgba(9, 12, 15, 0.56) 100%
        );
    }

    .cw-samples-hero::after {
        background: radial-gradient(
            circle at 84% 42%,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.05) 24%,
            rgba(255, 255, 255, 0) 54%
        );
    }

    body.light-mode .cw-samples-hero {
        background:
            linear-gradient(90deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0) 94%, var(--bg-primary) 100%),
            linear-gradient(0deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)),
            url("../../media/panorama/sample_hero.webp") 78% center / cover no-repeat;
    }

    body.light-mode .cw-samples-hero::before {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.9) 34%,
            rgba(255, 255, 255, 0.8) 60%,
            rgba(255, 255, 255, 0.62) 80%,
            rgba(255, 255, 255, 0.48) 100%
        );
    }

    body.light-mode .cw-samples-hero::after {
        background: radial-gradient(
            circle at 84% 42%,
            rgba(255, 255, 255, 0.38) 0%,
            rgba(255, 255, 255, 0.16) 24%,
            rgba(255, 255, 255, 0) 54%
        );
    }

    .cw-samples-hero-copy {
        max-width: 100%;
    }

    .cw-samples-hero h1 {
        font-size: clamp(1.15rem, 6vw, 1.5rem);
    }

    .cw-samples-hero p {
        font-size: 0.74rem;
        line-height: 1.38;
    }

    .cw-samples-hero-credit {
        right: 8px;
        bottom: 4px;
        font-size: 0.28rem;
        max-width: 34vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.42;
    }

    .cw-samples-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cw-samples-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cw-samples-tabs .btn,
    .cw-samples-pagination .btn {
        font-size: 0.7rem;
        padding: 6px 10px;
        width: auto;
        flex: 0 1 auto;
    }

    .cw-sample-card-body {
        gap: 5px;
        padding: 7px;
    }

    .cw-sample-card h2 {
        font-size: 0.73rem;
    }

    .cw-sample-card p {
        font-size: 0.66rem;
        -webkit-line-clamp: 2;
    }

    .cw-sample-card-meta {
        font-size: 0.56rem;
    }

    .cw-sample-card-price {
        font-size: 0.62rem;
    }

    .cw-sample-card-actions .btn {
        width: auto;
    }
}

@media (max-width: 480px) {
    .cw-samples-hero {
        min-height: 200px;
        padding: 10px 8px;
    }

    .cw-samples-kicker {
        font-size: 0.58rem;
    }

    .cw-samples-stats {
        gap: 6px;
        margin-top: 8px;
    }

    .cw-samples-stat {
        padding: 6px;
    }

    .cw-samples-stat strong {
        font-size: 0.8rem;
    }

    .cw-samples-stat span {
        font-size: 0.58rem;
    }

    .cw-samples-grid {
        gap: 6px;
    }

    .cw-sample-card {
        border-radius: 8px;
    }

    .cw-sample-card-body {
        padding: 6px;
    }

    .cw-sample-card-kicker span {
        min-height: 16px;
        padding: 0 5px;
        font-size: 0.52rem;
    }

    .cw-sample-card h2 {
        font-size: 0.68rem;
    }

    .cw-sample-card p {
        font-size: 0.62rem;
    }

    .cw-sample-card-meta {
        font-size: 0.52rem;
        gap: 3px 6px;
    }

    .cw-sample-card-actions {
        gap: 5px;
        align-items: flex-start;
    }

    .cw-sample-card-actions .btn {
        flex: 1 1 100%;
        width: 100%;
        padding: 5px 6px;
        font-size: 0.58rem;
        line-height: 1.15;
    }

    .cw-sample-card-price {
        font-size: 0.58rem;
    }

    .cw-samples-empty {
        font-size: 0.74rem;
        padding: 12px;
    }
}

@media (max-width: 360px) {
    .cw-samples-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width:640px){.cw-samples-hero{background-image:url("../../media/mobile/panorama/sample_hero.webp")}}
@media (max-width:640px){.cw-samples-hero{background:linear-gradient(90deg,var(--bg-primary) 0%,rgba(11,13,15,0) 7%,rgba(11,13,15,0) 93%,var(--bg-primary) 100%),linear-gradient(0deg,rgba(11,13,15,.16),rgba(11,13,15,.16)),url("../../media/mobile/panorama/sample_hero.webp") center center / cover no-repeat}body.light-mode .cw-samples-hero{background:linear-gradient(90deg,var(--bg-primary) 0%,rgba(255,255,255,0) 7%,rgba(255,255,255,0) 93%,var(--bg-primary) 100%),linear-gradient(0deg,rgba(255,255,255,.08),rgba(255,255,255,.08)),url("../../media/mobile/panorama/sample_hero.webp") 78% center / cover no-repeat}}
@media (min-width:641px){.cw-samples-hero{border-radius:clamp(18px,2.7vw,34px) clamp(18px,2.7vw,34px) clamp(30px,4vw,54px) clamp(10px,1.7vw,24px);box-shadow:inset 0 0 0 1px var(--border-color),inset 0 -30px 50px color-mix(in srgb,var(--bg-primary) 70%,transparent),0 16px 34px rgba(0,0,0,.16);background-position:center center,center center,center center!important;background-size:100% 100%,100% 100%,auto!important;background-repeat:no-repeat!important}.cw-sample-card-media img{width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;object-fit:initial!important}}@media (max-width:640px){.cw-samples-hero{min-height:auto;background-image:linear-gradient(135deg,color-mix(in srgb,var(--cw-teal) 9%,transparent),transparent 58%)!important;background-color:var(--bg-elevated)!important;background-position:center!important;background-size:auto!important;border-radius:18px;padding:16px 12px;box-shadow:inset 0 0 0 1px var(--border-color)}.cw-samples-hero::before,.cw-samples-hero::after,.cw-samples-hero-credit{display:none!important}body.light-mode .cw-samples-hero{background-image:linear-gradient(135deg,color-mix(in srgb,var(--cw-teal) 12%,transparent),rgba(255,255,255,.62) 62%)!important}.cw-sample-card-media img{width:100%;height:100%;object-fit:cover}}
@media (min-width:641px){.cw-samples-hero{background-size:100% 100%,100% 100%,cover!important}.cw-sample-card-media img{width:100%!important;height:100%!important;max-width:100%!important;max-height:none!important;object-fit:cover!important}}