/* ================================================================
   HubBits & MorDocs — Ware Record Chamber v1
   Presentation layer for the individual public product record.
   ================================================================ */

.ware-record-page{
    --record-violet:#9f70ee;
    --record-indigo:#7476bd;
    --record-gold:#d8bc78;
    --record-rose:#c984ad;
    --record-teal:#78aa9d;
    --record-ivory:#f4eef7;
    --record-muted:#9f98a6;
}

.ware-record-page .product-detail-section{
    position:relative;
    overflow:hidden;
}

.ware-record-page .product-detail-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 72% 14%,rgba(159,112,238,.07),transparent 28%),
        radial-gradient(circle at 19% 75%,rgba(216,188,120,.025),transparent 24%);
}

/* ---------------------------------------------------------------
   Breadcrumb / trail
   --------------------------------------------------------------- */

.ware-record-page .breadcrumbs{
    position:relative;
    z-index:2;
    flex-wrap:wrap;
    row-gap:7px;
}

.ware-record-page .breadcrumbs a{
    color:#b69adb;
}

.ware-record-page .breadcrumbs a:hover{
    color:#e5d6f8;
}

/* ---------------------------------------------------------------
   Image record
   --------------------------------------------------------------- */

.ware-record-page .ware-record-image{
    isolation:isolate;
    position:relative;
    overflow:hidden;
    border-color:rgba(216,188,120,.12);
    background:
        radial-gradient(circle at 50% 42%,rgba(159,112,238,.075),transparent 47%),
        linear-gradient(145deg,rgba(255,255,255,.018),transparent 45%),
        rgba(10,8,13,.82);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 24px 56px rgba(0,0,0,.22);
}

.ware-record-page .ware-record-image::after{
    content:"";
    position:absolute;
    z-index:0;
    right:-90px;
    bottom:-90px;
    width:280px;
    height:280px;
    border:1px solid rgba(159,112,238,.045);
    border-radius:50%;
    box-shadow:
        0 0 0 44px rgba(159,112,238,.009),
        0 0 0 88px rgba(159,112,238,.005);
    pointer-events:none;
}

.ware-record-page .ware-record-image > *{
    position:relative;
    z-index:2;
}

.ware-record-page .ware-record-image__badges{
    position:absolute;
    z-index:3;
    top:16px;
    left:16px;
    right:16px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.ware-record-page .ware-record-category-badge{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:5px 9px;
    border:1px solid rgba(216,188,120,.16);
    border-radius:999px;
    background:rgba(7,5,10,.72);
    color:#c8b4da;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
    text-decoration:none;
    text-transform:uppercase;
    backdrop-filter:blur(8px);
}

.ware-record-page .ware-record-category-badge:hover{
    border-color:rgba(216,188,120,.28);
    color:#eadcf4;
}

.ware-record-page .ware-record-image__sigil{
    position:absolute;
    z-index:1;
    right:22px;
    bottom:22px;
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border:1px solid rgba(216,188,120,.12);
    border-radius:50%;
    color:rgba(226,212,239,.20);
    background:rgba(8,6,11,.16);
}

.ware-record-page .ware-record-image__sigil > span{
    position:absolute;
    inset:-7px;
    border:1px solid rgba(159,112,238,.07);
    border-radius:50%;
}

.ware-record-page .ware-record-image__sigil svg{
    width:31px;
    height:31px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ---------------------------------------------------------------
   Main record chamber
   --------------------------------------------------------------- */

.ware-record-page .ware-record-chamber{
    isolation:isolate;
    position:relative;
    overflow:hidden;
    border-color:rgba(216,188,120,.16);
    background:
        radial-gradient(circle at 91% 9%,rgba(159,112,238,.09),transparent 27%),
        linear-gradient(145deg,rgba(255,255,255,.026),transparent 44%),
        rgba(12,9,16,.90);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 30px 72px rgba(0,0,0,.32),
        0 0 52px rgba(82,58,148,.045);
}

.ware-record-page .ware-record-chamber::before{
    content:"";
    position:absolute;
    z-index:0;
    top:0;
    left:12%;
    right:12%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(159,112,238,.16),
        rgba(216,188,120,.38),
        rgba(159,112,238,.16),
        transparent
    );
}

.ware-record-page .ware-record-chamber::after{
    content:"";
    position:absolute;
    z-index:0;
    right:-110px;
    top:150px;
    width:320px;
    height:320px;
    border:1px solid rgba(159,112,238,.038);
    border-radius:50%;
    box-shadow:
        0 0 0 42px rgba(159,112,238,.006),
        0 0 0 84px rgba(216,188,120,.004);
    pointer-events:none;
}

.ware-record-page .ware-record-chamber > *{
    position:relative;
    z-index:2;
}

.ware-record-page .ware-record-chamber__topline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px;
}

.ware-record-page .ware-record-seal{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:30px;
    padding:6px 10px;
    border:1px solid rgba(120,170,157,.18);
    border-radius:999px;
    background:rgba(120,170,157,.035);
    color:#b8d7cc;
    font-size:9px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.ware-record-page .ware-record-seal > span{
    color:#d8bc78;
}

.ware-record-page .ware-record-heading{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:15px;
}

.ware-record-page .ware-record-heading__sigil{
    position:relative;
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    flex:0 0 58px;
    border:1px solid rgba(216,188,120,.35);
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 45%,rgba(159,112,238,.14),transparent 59%),
        #0b0911;
    color:#eadcff;
    box-shadow:
        0 0 0 5px rgba(159,112,238,.022),
        0 0 25px rgba(159,112,238,.07);
    animation:hbWareRecordSigilArrival 1.45s cubic-bezier(.18,.72,.22,1) .08s both;
}

.ware-record-page .ware-record-heading__ring{
    position:absolute;
    inset:-7px;
    border:1px solid rgba(216,188,120,.16);
    border-radius:50%;
}

.ware-record-page .ware-record-heading__sigil svg{
    width:33px;
    height:33px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 5px rgba(159,112,238,.20));
}

.ware-record-page .ware-record-classification{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:3px 0 0;
    color:#8f8796;
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.ware-record-page .ware-record-classification > span{
    color:#d8bc78;
}

.ware-record-page .ware-record-chamber h1{
    margin-top:7px;
    color:#f4eef7;
    text-shadow:0 0 20px rgba(159,112,238,.04);
}

/* ---------------------------------------------------------------
   Record band
   --------------------------------------------------------------- */

.ware-record-page .ware-record-band{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    overflow:hidden;
    margin:20px 0 22px;
    border:1px solid rgba(205,194,218,.095);
    border-radius:12px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.012),transparent 45%),
        rgba(7,6,10,.26);
}

.ware-record-page .ware-record-band > span{
    min-width:0;
    padding:13px 15px;
    border-right:1px solid rgba(205,194,218,.075);
}

.ware-record-page .ware-record-band > span:last-child{
    border-right:0;
}

.ware-record-page .ware-record-band small,
.ware-record-page .ware-record-band strong{
    display:block;
}

.ware-record-page .ware-record-band small{
    color:#78717f;
    font-size:8px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.ware-record-page .ware-record-band strong{
    overflow:hidden;
    margin-top:4px;
    color:#d8d0dd;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ---------------------------------------------------------------
   Notes / request chamber
   --------------------------------------------------------------- */

.ware-record-page .ware-record-section-label{
    margin:0 0 6px;
    color:#d8bc78;
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.ware-record-page .ware-record-request-panel{
    border-color:rgba(216,188,120,.085);
    background:
        radial-gradient(circle at 92% 0%,rgba(159,112,238,.045),transparent 40%),
        rgba(8,6,11,.25);
}

.ware-record-page .ware-record-request-action{
    border-color:rgba(159,112,238,.28);
    background:
        radial-gradient(circle at 15% 0%,rgba(159,112,238,.13),transparent 44%),
        linear-gradient(135deg,#191321,#261a32 56%,#17121e);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 28px rgba(31,25,67,.17);
}

/* ---------------------------------------------------------------
   Guidance strip
   --------------------------------------------------------------- */

.ware-record-page .ware-record-guidance{
    gap:14px;
}

.ware-record-page .ware-record-guidance .product-confidence-item{
    position:relative;
    overflow:hidden;
    border-color:rgba(216,188,120,.08);
    background:
        linear-gradient(145deg,rgba(255,255,255,.010),transparent 44%),
        rgba(8,6,11,.25);
}

.ware-record-page .ware-record-guidance .product-confidence-item::before{
    content:"";
    position:absolute;
    left:15%;
    right:15%;
    top:0;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(159,112,238,.11),
        rgba(216,188,120,.15),
        transparent
    );
}

/* ---------------------------------------------------------------
   Missing listing
   --------------------------------------------------------------- */

.ware-record-page .ware-record-missing{
    border-color:rgba(216,188,120,.12);
    background:
        radial-gradient(circle at 50% 0%,rgba(159,112,238,.06),transparent 36%),
        rgba(8,6,11,.32);
}

/* ---------------------------------------------------------------
   Motion / responsive / accessibility
   --------------------------------------------------------------- */

@keyframes hbWareRecordSigilArrival{
    0%{
        opacity:.40;
        transform:scale(.92);
    }
    48%{
        opacity:1;
        transform:scale(1.04);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

@media(max-width:760px){
    .ware-record-page .ware-record-chamber__topline{
        align-items:flex-start;
        flex-direction:column;
    }

    .ware-record-page .ware-record-band{
        grid-template-columns:1fr;
    }

    .ware-record-page .ware-record-band > span{
        border-right:0;
        border-bottom:1px solid rgba(205,194,218,.075);
    }

    .ware-record-page .ware-record-band > span:last-child{
        border-bottom:0;
    }
}

@media(max-width:520px){
    .ware-record-page .ware-record-heading{
        align-items:flex-start;
    }

    .ware-record-page .ware-record-heading__sigil{
        width:52px;
        height:52px;
        flex-basis:52px;
    }

    .ware-record-page .ware-record-image__badges{
        right:12px;
        left:12px;
    }

    .ware-record-page .ware-record-category-badge{
        font-size:8px;
    }
}

@media(prefers-reduced-motion:reduce){
    .ware-record-page .ware-record-heading__sigil{
        animation:none !important;
        transition:none !important;
    }
}