/* ==================================================
CATEGORY - THREED [START]
================================================== */

/* ==================================================
THREED CONTENT WRAPPER
================================================== */

#comms-threed .threed-content{

width:min(1000px,100%);

margin:0 auto;

padding:0 35px 60px;

}

/* ==================================================
THREED HEADER
================================================== */

#comms-threed .threed-header{

width:100%;

min-height:180px;

margin:0 0 30px;
margin-top: 60px;

display:grid;

grid-template-columns:220px minmax(0,1fr);

align-items:stretch;

border:1px solid rgba(0,0,0,.1);

border-radius:10px;

background:#1c1c1c;

color:white;

font-family:"Poppins",sans-serif;

overflow:hidden;

}

/* ==================================================
HEADER IMAGE
================================================== */

#comms-threed .threed-header-image{

width:100%;

min-height:180px;

display:flex;

justify-content:center;

align-items:center;

background:#1c1c1c;

overflow:hidden;

}

#comms-threed .threed-header-image img{

width:100%;

height:100%;

display:block;

object-fit:cover;

}

/* ==================================================
HEADER INFORMATION
================================================== */

#comms-threed .threed-header-info{

min-width:0;

display:flex;

flex-direction:column;

justify-content:center;

padding:25px 30px;

}

#comms-threed .threed-header-label{

margin-bottom:6px;

font-size:.55rem;

font-weight:600;

letter-spacing:.2em;

opacity:.45;

}

#comms-threed .threed-header-title{

margin:0;

font-size:clamp(1.3rem,2.5vw,2rem);

font-weight:700;

letter-spacing:.12em;

line-height:1.1;

}

/* ==================================================
HEADER STATUS LIST
================================================== */

#comms-threed .threed-header-status-list{

width:100%;

margin-top:20px;

display:flex;

flex-direction:column;

gap:8px;

}

#comms-threed .threed-header-status{

width:100%;

display:flex;

align-items:center;

gap:12px;

font-family:"Poppins",sans-serif;

font-size:.7rem;

}

#comms-threed .threed-header-status-name{

white-space:nowrap;

}

#comms-threed .threed-header-status-line{

flex:1;

min-width:20px;

height:1px;

background:rgba(255,255,255,.25);

}

#comms-threed .threed-header-status-open{

white-space:nowrap;

font-size:.6rem;

font-weight:700;

letter-spacing:.12em;

}

/* ==================================================
CATEGORY LIST
================================================== */

#comms-threed .threed-category-list{

width:100%;

margin:0;

padding:0;

display:flex;

flex-direction:column;

gap:16px;

}

/* ==================================================
CATEGORY CARD

| NUMBER | IMAGE | INFORMATION | ARROW |
================================================== */

#comms-threed .threed-category-card{

width:100%;

min-height:180px;

display:grid;

grid-template-columns:70px 180px minmax(0,1fr) 60px;

align-items:stretch;

padding:0;

background:white;

border:1px solid rgba(0,0,0,.1);

border-radius:0;

font-family:"Poppins",sans-serif;

text-align:left;

cursor:pointer;

overflow:hidden;

transition:

transform .25s ease,

box-shadow .25s ease;

}

#comms-threed .threed-category-card:hover{

transform:translateX(5px);

box-shadow:0 12px 30px rgba(0,0,0,.08);

}

/* ==================================================
NUMBER
================================================== */

#comms-threed .threed-category-number{

display:flex;

justify-content:center;

align-items:center;

background:#1c1c1c;

color:#fff;

font-size:.75rem;

font-weight:600;

letter-spacing:.12em;

}

/* ==================================================
IMAGE
================================================== */

#comms-threed .threed-category-image{

width:180px;
padding:10px;

aspect-ratio:1 / 1;

overflow:hidden;

margin-left: 20px;

background:white;

}

#comms-threed .threed-category-image img{

width:100%;

height:100%;

display:block;

object-fit:contain;

transition:

filter .3s ease,

transform .3s ease;

}

/* ==================================================
OPEN CARD IMAGE
================================================== */

#comms-threed .threed-category-card:not(.closed)
.threed-category-image img{

filter:none;

}

#comms-threed .threed-category-card:not(.closed):hover
.threed-category-image img{

transform:scale(1.04);

}

/* ==================================================
CLOSED CARD IMAGE
================================================== */

#comms-threed .threed-category-card.closed
.threed-category-image img{

filter:grayscale(1);

}

#comms-threed .threed-category-card.closed:hover
.threed-category-image img{

transform:none;

}

/* ==================================================
CATEGORY INFORMATION
================================================== */

#comms-threed .threed-category-info{

min-width:0;

margin-left: 20px;

display:flex;

flex-direction:column;

justify-content:center;

padding:25px 30px;

}

#comms-threed .threed-category-title{

font-size:20px;

font-weight:700;

letter-spacing:.15em;

}

#comms-threed .threed-category-description{

max-width:500px;

margin-top:8px;
margin-bottom: 20px;

font-size:16px;

line-height:1.5;

opacity:.6;

}

#comms-threed .threed-category-price{

margin-top:15px;

font-size:16px;

font-weight:700;

letter-spacing:.12em;

}

/* ==================================================
ARROW
================================================== */

#comms-threed .threed-category-arrow{

display:flex;

justify-content:center;

align-items:center;

font-size:1.4rem;

transition:

transform .25s ease;

}

/* OPEN CARD = ARROW */

#comms-threed .threed-category-card:not(.closed)
.threed-category-arrow{

font-size:1.4rem;

}

/* CLOSED CARD = X */

#comms-threed .threed-category-card.closed
.threed-category-arrow{

font-size:1.2rem;

}

/* OPEN CARD HOVER */

#comms-threed .threed-category-card:not(.closed):hover
.threed-category-arrow{

transform:translateX(5px);

}

/* ==================================================
TABLET
================================================== */

@media(max-width:800px){

#comms-threed .threed-content{

padding:0 25px 50px;

}

#comms-threed .threed-header{

grid-template-columns:180px minmax(0,1fr);

min-height:160px;

}

#comms-threed .threed-header-image{

min-height:160px;

}

#comms-threed .threed-header-info{

padding:25px;

}

#comms-threed .threed-header-status{

font-size:.65rem;

}

#comms-threed .threed-category-card{

grid-template-columns:

60px

150px

minmax(0,1fr)

50px;

min-height:150px;

}

#comms-threed .threed-category-image{

width:150px;

}

#comms-threed .threed-category-info{

padding:20px;

}

}

/* ==================================================
MOBILE
================================================== */

@media(max-width:600px){

#comms-threed .threed-content{

padding:0 20px 50px;

}

#comms-threed .threed-header{

grid-template-columns:1fr;

min-height:0;

}

#comms-threed .threed-header-image{

height:180px;

min-height:0;

}

#comms-threed .threed-header-info{

padding:25px 22px;

}

#comms-threed .threed-header-title{

font-size:1.5rem;

}

#comms-threed .threed-category-card{

grid-template-columns:

50px

120px

minmax(0,1fr)

45px;

min-height:140px;

}

#comms-threed .threed-category-image{

width:120px;

}

#comms-threed .threed-category-info{

padding:18px;

}

#comms-threed .threed-category-title{

font-size:.75rem;

}

#comms-threed .threed-category-description{

font-size:.62rem;

line-height:1.4;

}

#comms-threed .threed-category-price{

font-size:.6rem;

}

}

/* ==================================================
SMALL MOBILE
================================================== */

@media(max-width:480px){

#comms-threed .threed-category-card{

grid-template-columns:

45px

minmax(0,1fr)

45px;

grid-template-rows:auto 1fr;

}

#comms-threed .threed-category-number{

grid-column:1;

grid-row:1 / 3;

}

#comms-threed .threed-category-image{

width:100%;

height:auto;

aspect-ratio:1 / 1;

grid-column:2;

grid-row:1;

}

#comms-threed .threed-category-info{

grid-column:2;

grid-row:2;

padding:18px;

}

#comms-threed .threed-category-arrow{

grid-column:3;

grid-row:1 / 3;

}

}

/* ==================================================
CATEGORY - THREED [END]
================================================== */

/* ==================================================
SUBCATEGORY - THREED ARTWORK [START]
================================================== */

/* ==================================================
3D VTUBER MODEL MODAL
================================================== */


/* ==================================================
BANNER
================================================== */

#threed-vtuber-modal .commission-banner {

    position: relative;

    overflow: hidden;

}


#threed-vtuber-modal .commission-banner img {

    width: 100%;

    display: block;

    object-fit: cover;

}


/* ==================================================
TECHNICAL DETAILS
================================================== */

#threed-vtuber-modal .technical-grid {

    grid-template-columns:
        repeat(4, 1fr);

}


/* ==================================================
3D COMMISSION PREVIEW
================================================== */

#threed-vtuber-modal .commission-preview {

    display: flex;

    align-items: center;

    justify-content: center;

}


#threed-vtuber-modal .commission-preview .type-chart {

    width: 100%;

    max-width: 420px;

    height: auto;

    object-fit: contain;

}


/* ==================================================
3D INVOICE
================================================== */

#threed-vtuber-modal .invoice-box {

    min-width: 0;

}


/* ==================================================
3D SERVICE EMPHASIS
================================================== */

#threed-vtuber-modal
.invoice-row:first-of-type {

    background: #f5f5f5;

}


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

@media (max-width: 900px) {


    #threed-vtuber-modal
    .technical-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


}


@media (max-width: 700px) {


    #threed-vtuber-modal
    .technical-grid {

        grid-template-columns:
            1fr;

    }


}
/* ==================================================
SUBCATEGORY - THREED ARTWORK [END]
================================================== */