/* ============================================================
   G-pop Customizer — stile G-pop Store
   ============================================================ */

/* ── Bottone trigger ───────────────────────────────────────── */
.gpop-cust-trigger-wrap {
    margin-top:  10px;
    padding-top: 10px;
    border-top:  1px solid #e8e8e6;
}

button.gpop-cust-trigger,
.woocommerce button.gpop-cust-trigger,
form.cart button.gpop-cust-trigger {
    display:        block       !important;
    width:          100%        !important;
    padding:        14px 20px   !important;
    background:     #ffffff     !important;
    color:          #0d0d0d     !important;
    border:         2px solid #0d0d0d !important;
    border-radius:  3px         !important;
    font-size:      11px        !important;
    font-weight:    800         !important;
    text-transform: uppercase   !important;
    letter-spacing: .12em       !important;
    font-family:    inherit     !important;
    cursor:         pointer     !important;
    text-align:     center      !important;
    box-shadow:     none        !important;
    transition:     background .2s, color .2s !important;
    margin:         0           !important;
}

button.gpop-cust-trigger:hover,
.woocommerce button.gpop-cust-trigger:hover {
    background: #0d0d0d !important;
    color:      #fff    !important;
}

/* ── Modal overlay ─────────────────────────────────────────── */
.gpop-cust-overlay {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    bottom:          0;
    width:           100%;
    height:          100%;
    background:      rgba(0,0,0,.8);
    z-index:         999999;
    display:         none;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    margin:          0;
    box-sizing:      border-box;
}
.gpop-cust-overlay.gpop-aperto {
    display: flex;
}

.gpop-cust-modal {
    background:    #fff     !important;
    border-radius: 4px      !important;
    width:         100%     !important;
    max-width:     960px    !important;
    max-height:    92vh     !important;
    overflow-y:    auto     !important;
    position:      relative !important;
    margin:        auto     !important;
}

.gpop-cust-close {
    position:      absolute;
    top:           14px;
    right:         14px;
    background:    #0d0d0d;
    color:         #fff;
    border:        none;
    width:         30px;
    height:        30px;
    border-radius: 50%;
    font-size:     13px;
    cursor:        pointer;
    z-index:       10;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.gpop-cust-close:hover { background: #333; }

/* ── Header ────────────────────────────────────────────────── */
.gpop-cust-header {
    background: #0d0d0d;
    color:      #fff;
    padding:    24px 28px 20px;
}

.gpop-cust-header-label {
    font-size:      10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          #555;
    margin-bottom:  5px;
}

.gpop-cust-header-title {
    font-size:      24px;
    font-weight:    900;
    text-transform: uppercase;
    letter-spacing: -.01em;
}

/* ── Body: 2 colonne ───────────────────────────────────────── */
.gpop-cust-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
}

/* ── Colonna preview ───────────────────────────────────────── */
.gpop-cust-preview-col {
    background: #f5f5f3;
    padding:    24px;
    border-right: 1px solid #e8e8e6;
    display:    flex;
    flex-direction: column;
    gap:        16px;
}

.gpop-cust-preview-label {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          #999;
}

/* Canvas prodotto */
.gpop-cust-canvas {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

.gpop-cust-mockup {
    position:      relative;
    width:         100%;
    aspect-ratio:  1;
    background:    #fff;
    border:        1px solid #e8e8e6;
    border-radius: 4px;
    overflow:      hidden;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.gpop-cust-mockup-img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}

.gpop-cust-mockup-placeholder {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    color:           #ccc;
    font-size:       12px;
}

.gpop-cust-mockup-placeholder span { font-size: 48px; }

/* Layer art sovrapposto */
.gpop-cust-art-layer {
    position: absolute;
    inset:    0;
    pointer-events: none;
}

.gpop-cust-art-img {
    position:   absolute;
    max-width:  80%;
    max-height: 80%;
    object-fit: contain;
    transition: all .2s ease;
    filter:     drop-shadow(0 2px 8px rgba(0,0,0,.2));
}

.gpop-cust-art-placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    color:           #ddd;
    font-size:       11px;
    text-transform:  uppercase;
    letter-spacing:  .08em;
    border:          2px dashed #e8e8e6;
    border-radius:   4px;
    margin:          20px;
}

.gpop-cust-art-placeholder span {
    font-size: 32px;
    color:     #ccc;
}

/* Controlli posizione */
.gpop-cust-position-controls {
    display:   flex;
    gap:       16px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.gpop-cust-pos-label {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          #888;
    margin-bottom:  6px;
}

.gpop-cust-pos-grid {
    display:               grid;
    grid-template-columns: repeat(3,28px);
    gap:                   3px;
}

.gpop-cust-pos-btn {
    width:         28px;
    height:        28px;
    background:    #fff;
    border:        1px solid #ddd;
    border-radius: 3px;
    font-size:     12px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background .15s;
    padding:       0;
}

.gpop-cust-pos-btn:hover { background: #f0f0ee; }
.gpop-cust-pos-btn.active { background: #0d0d0d; color: #fff; border-color: #0d0d0d; }

/* Controllo dimensione */
.gpop-cust-size-control {}

.gpop-cust-size-row {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.gpop-cust-size-btn {
    width:         28px;
    height:        28px;
    background:    #0d0d0d;
    color:         #fff;
    border:        none;
    border-radius: 3px;
    font-size:     16px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    line-height:   1;
    padding:       0;
    font-weight:   700;
}

.gpop-cust-size-btn:hover { background: #333; }

.gpop-cust-size-val {
    font-size:  13px;
    font-weight:700;
    color:      #0d0d0d;
    min-width:  36px;
    text-align: center;
}

/* Info art selezionata */
.gpop-cust-selected-info {
    background:    #fff;
    border:        1px solid #e8e8e6;
    border-radius: 3px;
    padding:       12px 14px;
}

.gpop-cust-selected-label {
    font-size:      9px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          #999;
    margin-bottom:  4px;
}

.gpop-cust-selected-name {
    font-size:   14px;
    font-weight: 800;
    color:       #0d0d0d;
    text-transform: uppercase;
}

.gpop-cust-selected-artist {
    font-size: 12px;
    color:     #888;
    margin-top: 2px;
}

/* CTA */
.gpop-cust-cta { margin-top: auto; }

.gpop-btn {
    display:        block;
    padding:        13px 20px;
    background:     #0d0d0d;
    color:          #fff;
    border:         2px solid #0d0d0d;
    border-radius:  3px;
    font-size:      11px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .1em;
    cursor:         pointer;
    text-align:     center;
    font-family:    inherit;
    transition:     background .15s, color .15s;
    width:          100%;
    box-sizing:     border-box;
}

.gpop-btn:hover { background: #333; border-color: #333; }

.gpop-btn-outline {
    background: transparent;
    color:      #0d0d0d;
}

.gpop-btn-outline:hover { background: #0d0d0d; color: #fff; }

/* ── Colonna art ───────────────────────────────────────────── */
.gpop-cust-art-col {
    padding:        20px;
    overflow-y:     auto;
    max-height:     70vh;
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

.gpop-cust-art-label {
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          #999;
    flex-shrink:    0;
}

/* Filtro artista */
.gpop-cust-filter {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    flex-shrink: 0;
}

.gpop-cust-filter-btn {
    padding:        5px 12px;
    background:     #fff;
    border:         1px solid #ddd;
    border-radius:  2px;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor:         pointer;
    color:          #555;
    transition:     background .15s, color .15s;
}

.gpop-cust-filter-btn:hover { background: #f0f0ee; }
.gpop-cust-filter-btn.active { background: #0d0d0d; color: #fff; border-color: #0d0d0d; }

/* Griglia art */
.gpop-cust-art-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
    gap:                   10px;
}

.gpop-cust-art-item {
    cursor:        pointer;
    border:        2px solid #e8e8e6;
    border-radius: 4px;
    overflow:      hidden;
    background:    #fff;
    transition:    border-color .15s, box-shadow .15s;
}

.gpop-cust-art-item:hover {
    border-color: #0d0d0d;
    box-shadow:   0 2px 8px rgba(0,0,0,.1);
}

.gpop-cust-art-item.active {
    border-color: #0d0d0d;
    box-shadow:   0 0 0 2px #0d0d0d;
}

.gpop-cust-art-item img {
    width:       100%;
    aspect-ratio:1;
    object-fit:  cover;
    display:     block;
}

.gpop-cust-art-empty {
    width:           100%;
    aspect-ratio:    1;
    background:      #f5f5f3;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    color:           #ccc;
}

.gpop-cust-art-item-name {
    font-size:      9px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          #0d0d0d;
    padding:        6px 8px 2px;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.gpop-cust-art-item-artist {
    font-size:  9px;
    color:      #888;
    padding:    0 8px 6px;
    white-space:nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 680px) {
    .gpop-cust-body { grid-template-columns: 1fr; }
    .gpop-cust-art-col { max-height: 300px; border-top: 1px solid #e8e8e6; }
    .gpop-cust-header { padding: 18px 18px 16px; }
}