/* =========================
   HPC COLLECTION ANALYTICS
========================= */

.hpc-ca-page{
    margin:24px 0;
    color:#171411;
}

/* =========================
   HERO
========================= */

.hpc-ca-hero{
    display:grid;
    grid-template-columns:1.35fr .9fr;
    gap:22px;
    align-items:stretch;
    margin-bottom:22px;
    padding:28px;
    border:1px solid rgba(176,138,82,0.28);
    border-radius:14px;
    background:#FDFBF8;
    box-shadow:0 14px 34px rgba(0,0,0,0.04);
}

.hpc-ca-kicker{
    margin-bottom:10px;
    color:#B08A52;
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.hpc-ca-hero h1{
    margin:0 0 10px;
    color:#171411;
    font-family:"Libre Baskerville",serif;
    font-size:34px;
    font-weight:400;
    line-height:1.15;
}

.hpc-ca-hero p{
    max-width:620px;
    margin:0;
    color:#5E5A55;
    font-size:15px;
    line-height:1.55;
}

.hpc-ca-summary{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.hpc-ca-summary > div{
    min-width:0;
    padding:14px;
    border:1px solid rgba(176,138,82,0.24);
    border-radius:10px;
    background:#FFFDF9;
    box-shadow:0 8px 20px rgba(0,0,0,0.025);
}

.hpc-ca-summary span{
    display:block;
    margin-bottom:7px;
    color:#5E5A55;
    font-size:11px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.hpc-ca-summary strong{
    display:block;
    color:#171411;
    font-size:20px;
    font-weight:700;
    line-height:1.2;
}

/* =========================
   OVERVIEW CARDS
========================= */

.hpc-ca-overview{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:14px;
    margin-bottom:24px;
}

.hpc-ca-card{
    min-width:0;
    padding:18px;
    border:1px solid rgba(176,138,82,0.28);
    border-radius:10px;
    background:#FFFDF9;
    box-shadow:0 8px 20px rgba(0,0,0,0.03);
}

.hpc-ca-card-number{
    margin-bottom:8px;
    color:#171411;
    font-size:22px;
    font-weight:700;
    line-height:1.2;
}

.hpc-ca-card-label{
    margin-bottom:5px;
    color:#5E5A55;
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.hpc-ca-card-note{
    color:#8A8178;
    font-size:12px;
    line-height:1.35;
}

/* =========================
   TWO COLUMN TABLE ROW
========================= */

.hpc-ca-two-columns{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    margin-bottom:18px;
}

.hpc-ca-two-columns > .hpc-ca-section{
    margin-bottom:0;
}

/* =========================
   SECTIONS
========================= */

.hpc-ca-section{
    min-width:0;
    margin-bottom:18px;
    border:1px solid rgba(176,138,82,0.22);
    border-radius:12px;
    background:#FFFDF9;
    box-shadow:0 10px 24px rgba(0,0,0,0.03);
    overflow:hidden;
}

.hpc-ca-section-head{
    padding:18px 20px;
    border-bottom:1px solid rgba(176,138,82,0.12);
    background:#FFFCF7;
}

.hpc-ca-section-head h2{
    margin:0;
    color:#171411;
    font-size:18px;
    font-weight:700;
    line-height:1.2;
}

/* =========================
   TABLES
========================= */

.hpc-ca-table-wrap{
    width:100%;
    min-width:0;
    overflow-x:auto;
}

.hpc-ca-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

.hpc-ca-table th{
    padding:11px 14px;
    background:#F7F1E8;
    border-bottom:1px solid rgba(176,138,82,0.22);
    color:#5E5A55;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-align:left;
    text-transform:uppercase;
    white-space:nowrap;
}

.hpc-ca-table td{
    padding:12px 14px;
    border-bottom:1px solid rgba(176,138,82,0.14);
    color:#171411;
    font-size:13px;
    line-height:1.35;
}

.hpc-ca-table tr:last-child td{
    border-bottom:none;
}

.hpc-ca-table th:not(:first-child),
.hpc-ca-table td:not(:first-child){
    text-align:right;
    white-space:nowrap;
}

.hpc-ca-table td:first-child{
    font-weight:700;
}

/* =========================
   EXPAND TABLE CONTROLS
========================= */

.hpc-ca-section-count{
    color:#B08A52;
    font-size:13px;
    font-weight:600;
}

.hpc-ca-expand-row[hidden]{
    display:none !important;
}

.hpc-ca-expand-actions{
    padding:14px 16px 16px;
    border-top:1px solid rgba(176,138,82,0.14);
    background:#FFFDF9;
    text-align:center;
}

.hpc-ca-expand-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 16px;
    background:transparent;
    border:0;
    border-radius:4px;
    color:#B08A52;
    font-size:12px;
    font-weight:700;
    line-height:1;
    letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
}

.hpc-ca-expand-button:hover{
    background:#B08A52;
    color:#FDFBF8;
}

/* =========================
   MOST PEN CARDS
========================= */

.hpc-ca-most-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
    align-items:stretch;
    padding:20px;
}

.hpc-ca-most-grid-four{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.hpc-ca-most-pen-card{
    min-width:0;
    height:100%;
    overflow:hidden;

    display:grid;
    grid-template-rows:auto 1fr;

    background:#fff;
    border:1px solid rgba(176,138,82,0.28);
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,0.03);
}

.hpc-ca-most-pen-image{
    display:block;
    position:relative;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#F3F0EB;
}

.hpc-ca-most-pen-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .22s ease;
}

.hpc-ca-most-pen-card:hover .hpc-ca-most-pen-image img{
    transform:scale(1.03);
}

.hpc-ca-most-pen-body{
    min-height:220px;
    padding:15px;

    display:grid;
    grid-template-rows:auto auto 1fr auto;
}

.hpc-ca-most-label{
    margin:0 0 12px;
    color:#B08A52;
    font-size:11px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.hpc-ca-most-pen-body h3{
    margin:0;
    color:#171411;
    font-size:15px;
    line-height:1.28;
}

.hpc-ca-most-pen-body h3 a{
    color:#171411;
    text-decoration:none;
}

.hpc-ca-most-pen-body h3 a:hover{
    color:#B08A52;
}

.hpc-ca-most-pen-bottom{
    grid-row:4;
    align-self:end;
}

.hpc-ca-most-pen-meta{
    margin:0 0 12px;
    color:#8A6A3F;
    font-size:12px;
    line-height:1.4;
}

.hpc-ca-most-pen-value{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:12px;

    padding-top:12px;
    border-top:1px solid rgba(176,138,82,0.16);
}

.hpc-ca-most-pen-value span{
    display:block;
    margin-bottom:5px;
    color:#5E5A55;
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.hpc-ca-most-pen-value strong{
    display:block;
    color:#B08A52;
    font-size:22px;
    font-weight:700;
    line-height:1.15;
}

.hpc-ca-most-pen-card .hpc-ca-small-link{
    display:inline-block;
    margin-top:12px;
}

.hpc-ca-most-pen-card .hpc-ca-small-link{
    margin-top:0;
    white-space:nowrap;
}

.hpc-ca-small-link{
    color:#B08A52;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-decoration:none;
    text-transform:uppercase;
}

.hpc-ca-small-link:hover{
    color:#171411;
}

.hpc-ca-most-empty{
    grid-row:4;
    align-self:end;
    color:#8A8178;
    font-size:12px;
    line-height:1.4;
}

/* =========================
   COLLECTION INSIDE
========================= */

.hpc-ca-inside-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:14px;
    padding:20px;
}

.hpc-ca-inside-card{
    min-width:0;
    padding:16px;
    border:1px solid rgba(176,138,82,0.24);
    border-radius:10px;
    background:#fff;
}

.hpc-ca-inside-card h3{
    margin:0 0 12px;
    color:#171411;
    font-size:14px;
    line-height:1.25;
}

.hpc-ca-inside-list{
    border:1px solid rgba(176,138,82,0.18);
    border-radius:8px;
    overflow:hidden;
}

.hpc-ca-inside-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    padding:9px 10px;
    border-bottom:1px solid rgba(176,138,82,0.12);
}

.hpc-ca-inside-row:last-child{
    border-bottom:none;
}

.hpc-ca-inside-row span{
    min-width:0;
    color:#5E5A55;
    font-size:12px;
    line-height:1.25;
}

.hpc-ca-inside-row strong{
    color:#B08A52;
    font-size:14px;
    font-weight:700;
    line-height:1;
}

.hpc-ca-inside-empty{
    color:#8A8178;
    font-size:12px;
    line-height:1.4;
}

/* =========================
   GAIN COLORS
========================= */

.hpc-ca-gain.positive{
    color:#2F7D32 !important;
}

.hpc-ca-gain.negative{
    color:#B3261E !important;
}

/* =========================
   EMPTY
========================= */

.hpc-ca-empty{
    padding:22px;
    color:#5E5A55;
    font-size:14px;
    line-height:1.45;
    text-align:center;
}

.hpc-ca-main-empty{
    border:1px dotted #B08A52;
    border-radius:10px;
    background:#FDFBF8;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1300px){

    .hpc-ca-inside-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

}

@media (max-width:1200px){

    .hpc-ca-overview{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .hpc-ca-most-grid,
    .hpc-ca-most-grid-four{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}

@media (max-width:900px){

    .hpc-ca-hero,
    .hpc-ca-two-columns{
        grid-template-columns:1fr;
    }

    .hpc-ca-summary,
    .hpc-ca-inside-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}

@media (max-width:768px){

    .hpc-ca-overview,
    .hpc-ca-summary,
    .hpc-ca-most-grid,
    .hpc-ca-most-grid-four,
    .hpc-ca-inside-grid{
        grid-template-columns:1fr;
    }

    .hpc-ca-hero{
        padding:22px;
    }

    .hpc-ca-hero h1{
        font-size:28px;
    }

}

/* =========================
   COLLECTION INSIDE TOGGLE
========================= */

.hpc-ca-inside-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.hpc-ca-inside-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    min-height:28px;
    padding:0 10px;

    background:transparent;
    border:0;
    border-radius:4px;

    color:#B08A52;

    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.06em;
    text-transform:uppercase;

    cursor:pointer;
}

.hpc-ca-inside-toggle:hover{
    background:#B08A52;
    color:#FDFBF8;
}

.hpc-ca-inside-toggle-icon{
    font-size:12px;
    line-height:1;
}

.hpc-ca-inside-section:not(.is-open) .hpc-ca-inside-row:nth-child(n+6){
    display:none;
}

.hpc-ca-inside-section.is-open .hpc-ca-inside-toggle-icon{
    transform:rotate(180deg);
}

/* =========================
   ANALYTICS NAVIGATION
========================= */

.hpc-ca-analytics-nav{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:14px;

    font-size:13px;
    font-weight:600;
}

.hpc-ca-analytics-nav span{
    color:#B08A52;
    opacity:.45;
}

.hpc-ca-analytics-link{
    color:#5E5A55;
    text-decoration:none;

    transition:.18s ease;
}

.hpc-ca-analytics-link:hover{
    color:#171411;
}

.hpc-ca-analytics-link.is-active{
    color:#B08A52;
    border-bottom:1px solid rgba(176,138,82,.45);
}

/* =========================
   COLLECTION EXPLORER
========================= */

.hpc-ca-explorer-layout{
    display:grid;
    grid-template-columns:240px 280px 1fr;
    gap:18px;
    padding:20px;
}

.hpc-ca-explorer-column{
    min-width:0;
    padding:16px;
    border:1px solid rgba(176,138,82,0.24);
    border-radius:10px;
    background:#fff;
}

.hpc-ca-explorer-title{
    margin:0 0 12px;
    color:#171411;
    font-size:14px;
    font-weight:700;
    line-height:1.25;
}

.hpc-ca-explorer-list{
    max-height:430px;
    overflow-y:auto;
    border:1px solid rgba(176,138,82,0.18);
    border-radius:8px;
}

.hpc-ca-explorer-brand,
.hpc-ca-explorer-model{
    width:100%;
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    padding:10px;
    border:0;
    border-bottom:1px solid rgba(176,138,82,0.12);
    background:#fff;
    color:#171411;
    text-align:left;
    cursor:pointer;
}

.hpc-ca-explorer-brand:last-child,
.hpc-ca-explorer-model:last-child{
    border-bottom:none;
}

.hpc-ca-explorer-brand span,
.hpc-ca-explorer-model span{
    min-width:0;
    color:#5E5A55;
    font-size:12px;
    font-weight:700;
    line-height:1.25;
}

.hpc-ca-explorer-brand strong,
.hpc-ca-explorer-model strong{
    color:#B08A52;
    font-size:14px;
    font-weight:700;
    line-height:1;
}

.hpc-ca-explorer-brand:hover,
.hpc-ca-explorer-brand.is-active,
.hpc-ca-explorer-model:hover,
.hpc-ca-explorer-model.is-active{
    background:#F7F1E8;
}

.hpc-ca-explorer-brand:hover span,
.hpc-ca-explorer-brand.is-active span,
.hpc-ca-explorer-model:hover span,
.hpc-ca-explorer-model.is-active span{
    color:#171411;
}

.hpc-ca-explorer-model-panel,
.hpc-ca-explorer-pens-panel{
    display:none;
}

.hpc-ca-explorer-model-panel.is-active,
.hpc-ca-explorer-pens-panel.is-active{
    display:block;
}

.hpc-ca-explorer-pens-table{
    border:1px solid rgba(176,138,82,0.18);
    border-radius:8px;
    overflow:hidden;
}

.hpc-ca-explorer-pens-head,
.hpc-ca-explorer-pens-row{
    display:grid;
    grid-template-columns:1.6fr 100px 100px 100px;
    gap:10px;
    align-items:center;
}

.hpc-ca-explorer-pens-head{
    padding:11px 12px;
    background:#F7F1E8;
    border-bottom:1px solid rgba(176,138,82,0.22);
    color:#5E5A55;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.hpc-ca-explorer-pens-row{
    padding:11px 12px;
    border-bottom:1px solid rgba(176,138,82,0.12);
    background:#fff;
    color:#171411;
    font-size:13px;
}

.hpc-ca-explorer-pens-row:last-child{
    border-bottom:none;
}

.hpc-ca-explorer-pens-head div:not(:first-child),
.hpc-ca-explorer-pens-row div:not(:first-child){
    text-align:right;
}

.hpc-ca-explorer-pens-row a{
    color:#171411;
    text-decoration:none;
    font-weight:700;
    border-bottom:1px solid rgba(176,138,82,0.35);
}

.hpc-ca-explorer-pens-row a:hover{
    color:#B08A52;
    border-bottom-color:#B08A52;
}

@media (max-width:1100px){
    .hpc-ca-explorer-layout{
        grid-template-columns:1fr;
    }
}