.camopedia-wrap{
    width:min(1120px,calc(100% - 32px));
    margin:auto
}

.camopedia-hero{
    background:#191b18;
    color:#fff;
    padding:46px 0
}

.camopedia-hero-grid{
    display:grid;
    grid-template-columns:minmax(260px,390px) 1fr;
    gap:42px;
    align-items:center
}

.camopedia-pattern-image{
    width:100%;
    max-height:510px;
    object-fit:cover;
    border-radius:18px;
    display:block
}

.camopedia-eyebrow{
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:12px;
    font-weight:700;
    opacity:.7
}

.camopedia-hero h1{
    margin:8px 0 6px;
    font-size:clamp(34px,5vw,62px);
    line-height:1
}

.camopedia-pattern-name{
    font-size:23px;
    opacity:.82;
    margin-bottom:25px
}

.camopedia-snapshot{
    font-size:21px;
    max-width:700px
}

.camopedia-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px
}

.camopedia-button{
    display:inline-block;
    padding:11px 16px;
    border-radius:9px;
    background:#fff;
    color:#191b18;
    text-decoration:none;
    font-weight:700
}

.camopedia-button:hover{
    opacity:.88
}

.camopedia-button-secondary{
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.45)
}

.camopedia-section{
    padding:42px 0
}

.camopedia-section h2{
    margin:0 0 22px;
    font-size:30px
}

.camopedia-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.camopedia-card{
    background:#020202;
    border-radius:16px;
    padding:22px;
    box-shadow:0 2px 14px rgba(0,0,0,.06)
}

.camopedia-rank{
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.55
}

.camopedia-card h3{
    margin:7px 0 8px;
    font-size:20px
}

.camopedia-result{
    font-weight:700;
    margin-bottom:8px
}

.camopedia-reason{
    font-size:14px;
    color:#a1a1a1
}

.camopedia-metric-title{
    font-weight:700;
    font-size:18px;
    margin-bottom:16px
}

.camopedia-bar-row{
    margin:12px 0
}

.camopedia-bar-label{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:5px
}

.camopedia-bar{
    background:#e8e8e2;
    height:10px;
    border-radius:99px;
    overflow:hidden
}

.camopedia-fill{
    background:#50534b;
    height:100%;
    border-radius:99px
}

.camopedia-swatches{
    display:flex;
    gap:7px;
    margin:14px 0
}

.camopedia-swatch{
    width:38px;
    height:38px;
    border-radius:8px;
    border:1px solid rgba(0,0,0,.15)
}

.camopedia-meta{
    font-size:14px;
    color:#62645e;
    margin-top:8px
}

.camopedia-traits{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px
}

.camopedia-trait h3{
    margin:0 0 5px
}

.camopedia-trait-result{
    font-weight:700;
    font-size:17px
}

.camopedia-trait p{
    margin:10px 0 0
}

.camopedia-notice{
    background:#272625;
    padding:12px 14px;
    border-radius:10px;
    font-size:14px
}

.camopedia-footer-note{
    font-size:13px;
    color:#777970;
    border-top:1px solid #dddcd5;
    padding:24px 0 50px
}

.camopedia-not-found{
    padding:70px 0
}

@media(max-width:800px){
    .camopedia-hero-grid,
    .camopedia-grid-3,
    .camopedia-traits{
        grid-template-columns:1fr
    }

    .camopedia-pattern-image{
        max-height:420px
    }
}


/* ============================================================
   CAMOPEDIA INDEX
   ============================================================ */

.camopedia-index-hero{
    background:#191b18;
    color:#fff;
    padding:52px 0 38px
}

.camopedia-index-hero h1{
    margin:6px 0 12px;
    font-size:clamp(38px,6vw,68px);
    line-height:1
}

.camopedia-index-intro{
    max-width:760px;
    font-size:19px;
    margin:0
}

.camopedia-index-count{
    margin-top:18px;
    font-size:14px;
    opacity:.72
}

.camopedia-search-wrap{
    margin-top:25px;
    max-width:560px
}

.camopedia-search{
    width:100%;
    padding:14px 16px;
    border:0;
    border-radius:10px;
    font-size:17px;
    outline:none
}

.camopedia-index-main{
    padding-top:28px;
    padding-bottom:50px
}

.camopedia-pattern-grid{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(190px,1fr)
        );
    gap:12px
}

.camopedia-pattern-card{
    position:relative;
    display:block;
    aspect-ratio:1 / 1.25;
    overflow:hidden;
    border-radius:12px;
    background:#222;
    color:#fff;
    text-decoration:none
}

.camopedia-card-image{
    width:100%;
    height:100%
}

.camopedia-card-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .22s ease
}

.camopedia-pattern-card:hover
.camopedia-card-image img{
    transform:scale(1.035)
}

.camopedia-card-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:42px 13px 13px;
    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.84)
        )
}

.camopedia-card-pattern{
    font-size:18px;
    font-weight:700;
    line-height:1.15
}

.camopedia-card-brand{
    margin-top:3px;
    font-size:13px;
    opacity:.82
}

.camopedia-card-standout{
    margin-top:8px;
    font-size:12px;
    line-height:1.25;
    opacity:.82
}

.camopedia-no-results{
    padding:60px 0;
    text-align:center;
    font-size:18px;
    color:#666
}

@media(max-width:600px){

    .camopedia-pattern-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
        gap:8px
    }

    .camopedia-card-pattern{
        font-size:15px
    }

    .camopedia-card-standout{
        display:none
    }
}


/* ============================================================
   CAMOPEDIA BROWSER NAVIGATION
   ============================================================ */

.camopedia-browser{
    background:#ecebe5;
    border-bottom:1px solid #d7d6cf;
    padding:16px 0
}

.camopedia-browser-title{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:9px;
    color:#5b5d56
}

.camopedia-browser-controls{
    display:flex;
    align-items:end;
    gap:10px;
    flex-wrap:wrap
}

.camopedia-browser-all,
.camopedia-browser-pager a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 13px;
    border-radius:8px;
    background:#252822;
    color:#fff !important;
    text-decoration:none;
    font-weight:700
}

.camopedia-browser-select{
    flex:1 1 210px
}

.camopedia-browser-select label{
    display:block;
    font-size:12px;
    font-weight:700;
    margin-bottom:4px;
    color:#66685f
}

.camopedia-browser-select select{
    width:100%;
    min-height:42px;
    padding:8px 34px 8px 10px;
    border:1px solid #c8c8c0;
    border-radius:8px;
    background:#fff;
    font-size:16px
}

.camopedia-browser-pager{
    display:flex;
    gap:8px;
    margin-left:auto
}

.camopedia-browser-pager span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 13px;
    border-radius:8px;
    background:#d8d7d0;
    color:#96978f
}

@media(max-width:700px){

    .camopedia-browser-controls{
        display:grid;
        grid-template-columns:1fr 1fr
    }

    .camopedia-browser-all{
        grid-column:1 / -1
    }

    .camopedia-browser-select{
        min-width:0
    }

    .camopedia-browser-pager{
        grid-column:1 / -1;
        width:100%;
        margin:2px 0 0
    }

    .camopedia-browser-pager a,
    .camopedia-browser-pager span{
        flex:1
    }
}

@media(max-width:430px){

    .camopedia-browser-controls{
        grid-template-columns:1fr
    }

    .camopedia-browser-all,
    .camopedia-browser-pager{
        grid-column:1
    }
}

/* Camopedia Pattern DNA filter engine */

.camopedia-filter-panel {
    margin-top: 14px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.72);
    overflow: hidden;
}

.camopedia-filter-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.camopedia-filter-summary {
    font-size: .86rem;
    font-weight: 500;
    opacity: .68;
}

.camopedia-filter-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
    padding: 4px 15px 16px;
}

.camopedia-filter-group {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.camopedia-filter-group legend {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: .92rem;
}

.camopedia-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.camopedia-filter-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 999px;
    background: #fff;
    font-size: .82rem;
    line-height: 1.1;
    cursor: pointer;
}

.camopedia-filter-option:has(input:checked) {
    border-color: currentColor;
    font-weight: 700;
}

.camopedia-filter-option input {
    margin: 0;
}

.camopedia-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    border-top: 1px solid rgba(0,0,0,.09);
}

.camopedia-clear-filters {
    padding: 8px 12px;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    font: inherit;
}

.camopedia-clear-filters:disabled {
    opacity: .45;
    cursor: default;
}

.camopedia-result-count {
    font-size: .9rem;
    font-weight: 700;
}

@media (max-width: 700px) {

    .camopedia-filter-groups {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .camopedia-filter-option {
        padding: 8px 10px;
    }

    .camopedia-filter-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
    }
}

@media (max-width: 430px) {

    .camopedia-filter-panel summary {
        padding: 12px;
    }

    .camopedia-filter-groups {
        padding-left: 12px;
        padding-right: 12px;
    }

    .camopedia-filter-footer {
        padding: 10px 12px;
    }
}

/* Camopedia filter UX repair */

.camopedia-pattern-card[hidden] {
    display: none !important;
}

.camopedia-filter-panel {
    background: #f3f1eb;
    color: #222;
}

.camopedia-filter-panel summary,
.camopedia-filter-group legend,
.camopedia-filter-summary,
.camopedia-result-count {
    color: #222;
}

.camopedia-filter-option {
    background: #fff;
    color: #222;
    border-color: rgba(0,0,0,.22);
}

.camopedia-filter-option:has(input:checked) {
    background: #222;
    color: #fff;
    border-color: #222;
}

.camopedia-clear-filters {
    background: #fff;
    color: #222;
}

@media (max-width: 700px) {
    .camopedia-filter-footer {
        background: #f3f1eb;
        color: #222;
    }
}

/* Camopedia thumbnail-first card layout */

.camopedia-pattern-grid {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px,1fr)
        );
    gap:14px;
}

.camopedia-pattern-card {
    aspect-ratio:auto;
    background:#222;
    overflow:hidden;
}

.camopedia-card-image {
    width:100%;
    aspect-ratio:200 / 105;
    height:auto;
    background:#222;
}

.camopedia-card-image img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.camopedia-card-overlay {
    position:static;
    padding:10px 12px 11px;
    background:#222;
}

.camopedia-card-pattern {
    font-size:.98rem;
    line-height:1.15;
}

.camopedia-card-brand {
    margin-top:2px;
}

.camopedia-card-standout {
    margin-top:6px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

@media (max-width:700px) {

    .camopedia-pattern-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
        gap:10px;
    }

    .camopedia-card-overlay {
        padding:8px 9px 9px;
    }

    .camopedia-card-pattern {
        font-size:.9rem;
    }

    .camopedia-card-brand,
    .camopedia-card-standout {
        font-size:.76rem;
    }
}

@media (max-width:380px) {

    .camopedia-pattern-grid {
        grid-template-columns:1fr;
    }
}

/* Camopedia educational Explore pages */

.camopedia-explore-education {
    margin:18px 0 4px;
    padding:16px 18px;
    border-radius:10px;
    background:#f3f1eb;
    color:#222;
}

.camopedia-explore-education h2 {
    margin:0 0 8px;
    color:#222;
    font-size:1.1rem;
}

.camopedia-explore-education p {
    margin:0 0 9px;
    color:#222;
}

.camopedia-explore-education p:last-child {
    margin-bottom:0;
}

.camopedia-explore-measure {
    font-size:.92rem;
}

.camopedia-related-explore {
    margin:28px 0;
    padding:18px;
    border-top:1px solid rgba(0,0,0,.14);
}

.camopedia-related-explore h2 {
    margin-top:0;
}

.camopedia-related-links {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.camopedia-related-links a {
    display:inline-block;
    padding:8px 11px;
    border:1px solid rgba(0,0,0,.18);
    border-radius:999px;
    text-decoration:none;
}

@media (max-width:700px) {
    .camopedia-explore-education {
        padding:14px;
    }
}

/* Camopedia home Explore discovery */

.camopedia-home-explore {
    margin:22px 0 18px;
}

.camopedia-home-explore-head h2 {
    margin:0 0 4px;
    font-size:1.25rem;
}

.camopedia-home-explore-head p {
    margin:0 0 12px;
}

.camopedia-home-explore-grid {
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:9px;
}

.camopedia-home-explore-card {
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:11px 12px;
    border-radius:9px;
    background:#f3f1eb;
    color:#222;
    text-decoration:none;
    border:1px solid rgba(0,0,0,.12);
}

.camopedia-home-explore-card:hover {
    border-color:rgba(0,0,0,.35);
}

.camopedia-home-explore-card strong {
    line-height:1.15;
}

.camopedia-home-explore-card span {
    font-size:.82rem;
    opacity:.7;
}

@media (max-width:700px) {

    .camopedia-home-explore-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

/* Pattern DNA -> Explore trait links */

.camopedia-pattern-explore-intro {
    margin:0 0 12px;
}

.camopedia-pattern-explore-links {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.camopedia-pattern-explore-links a {
    display:inline-block;
    padding:9px 12px;
    border:1px solid rgba(0,0,0,.18);
    border-radius:999px;
    background:#f3f1eb;
    color:#222;
    text-decoration:none;
    font-size:.9rem;
}

.camopedia-pattern-explore-links a:hover {
    border-color:rgba(0,0,0,.4);
}

/* Camopedia Pattern DNA similarity */

.camopedia-similarity-intro {
    margin:-10px 0 22px;
    max-width:760px;
    color:#a1a1a1;
}

.camopedia-similarity-score {
    font-weight:700;
    opacity:1;
}

.camopedia-similarity-item {
    min-width:0;
}

.camopedia-similarity-compare {
    display:block;
    margin-top:9px;
    padding:10px 12px;
    border-radius:9px;
    background:#222;
    color:#fff;
    text-align:center;
    text-decoration:none;
    font-size:.88rem;
    font-weight:700;
}

.camopedia-similarity-compare:hover {
    background:#333;
}

/* Camopedia similarity explanation trigger */

.camopedia-similarity-why {
    display:block;
    width:100%;
    box-sizing:border-box;
    margin-top:6px;
    padding:9px 12px;
    border:1px solid #333;
    border-radius:9px;
    background:#111;
    color:#ddd;
    text-align:center;
    font:inherit;
    font-size:.84rem;
    font-weight:700;
    cursor:pointer;
}

.camopedia-similarity-why:hover {
    background:#1d1d1d;
    color:#fff;
}

.camopedia-similarity-why:disabled {
    opacity:.45;
    cursor:not-allowed;
}