/* ── FUENTES ── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@300;400;500;600;700&display=swap');

/* ── CATÁLOGO ── */
#pmk-catalogo { background:#f5f5f5; padding:60px 20px 40px; color:#1a1a1a; }
.pmk-cat-header { text-align:center; margin-bottom:40px; }
.pmk-cat-title { font-family:'Bebas Neue',sans-serif; font-size:42px; letter-spacing:6px; color:#1a1a1a; margin:0 0 8px; }
.pmk-cat-desc { font-family:'Barlow',sans-serif; font-size:14px; color:#888; margin:0; }
.pmk-cat-count { font-family:'Barlow',sans-serif; font-size:12px; color:#ff6b00; margin:6px 0 0; font-weight:600; letter-spacing:1px; }
.pmk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; max-width:1200px; margin:0 auto; }
.pmk-card { background:#fff; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; cursor:pointer; transition:all .2s ease; box-shadow:0 2px 8px rgba(0,0,0,0.06); text-decoration:none; display:block; color:inherit; }
.pmk-card:hover { border-color:#ff6b00; transform:translateY(-4px); box-shadow:0 8px 24px rgba(255,107,0,0.15); text-decoration:none; color:inherit; }
.pmk-card-img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#f9f9f9; }
.pmk-card-body { padding:14px 16px; }
.pmk-card-name { font-family:'Barlow',sans-serif; font-size:13px; font-weight:600; color:#1a1a1a; margin:0 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmk-card-price { font-family:'Barlow',sans-serif; font-size:14px; font-weight:700; color:#ff6b00; margin:0; }
.pmk-card-btn { display:block; width:100%; background:transparent; border:1px solid #e0e0e0; color:#888; padding:8px; font-family:'Barlow',sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; cursor:pointer; margin-top:10px; border-radius:4px; transition:all .2s; text-align:center; }
.pmk-card:hover .pmk-card-btn { border-color:#ff6b00; color:#ff6b00; background:#fff8f4; }

/* ── PÁGINA PRODUCTO ── */
#pmk-producto-page { background:#fff; min-height:calc(100vh - 140px); }
.pmk-producto-inner { display:grid; grid-template-columns:1fr 400px; min-height:calc(100vh - 140px); }

/* PREVIEW izquierda sticky */
.pmk-preview {
    background:#f9f9f9;
    border-right:1px solid #eee;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px;
    position:sticky;
    top:120px;
    align-self:start;
    height:calc(100vh - 140px);
}
.pmk-preview-tag { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:#bbb; margin-bottom:16px; }
.pmk-shirt-wrap { position:relative; width:100%; max-width:460px; aspect-ratio:1; }
.pmk-shirt-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .25s ease; }
.pmk-shirt-wrap img.pmk-off { opacity:0; pointer-events:none; }
.pmk-color-bar { display:flex; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap; justify-content:center; }
.pmk-color-bar > span { font-size:10px; color:#aaa; text-transform:uppercase; letter-spacing:1px; }
.pmk-color-pip { width:24px; height:24px; border-radius:4px; border:2px solid transparent; transition:all .2s; }
.pmk-color-pip.active { border-color:#ff6b00; transform:scale(1.2); }

/* CONFIG derecha */
.pmk-config {
    overflow-y:auto;
    padding:32px 28px 60px;
    max-height:calc(100vh - 140px);
    color:#1a1a1a;
    font-family:'Barlow',sans-serif;
    background:#fff;
}

/* Título en naranja y grueso */
.pmk-prod-name {
    font-family:'Bebas Neue',sans-serif;
    font-size:32px;
    letter-spacing:3px;
    color:#ff6b00;
    margin-bottom:8px;
    font-weight:700;
    line-height:1.1;
}
.pmk-prod-desc { font-size:12px; color:#888; line-height:1.7; margin-bottom:20px; }

/* accordion */
.pmk-grp { border-top:1px solid #eee; }
.pmk-grp:last-of-type { border-bottom:1px solid #eee; }
.pmk-grp-head { display:flex; justify-content:space-between; align-items:center; padding:13px 2px; cursor:pointer; user-select:none; }
.pmk-grp-head-left { display:flex; align-items:center; gap:8px; }
.pmk-grp-title { font-size:9px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#1a1a1a; }
.pmk-grp-pip { width:16px; height:16px; border-radius:3px; border:1px solid #ddd; }
.pmk-grp-arrow { font-size:11px; color:#aaa; transition:transform .2s; }
.pmk-grp.open .pmk-grp-arrow { transform:rotate(180deg); }
.pmk-grp-body { display:none; padding-bottom:14px; }
.pmk-grp.open .pmk-grp-body { display:block; }

/* swatches */
.pmk-swatches { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.pmk-sw { aspect-ratio:1; border-radius:3px; border:2px solid transparent; cursor:pointer; position:relative; overflow:hidden; transition:all .15s; }
.pmk-sw:hover { transform:scale(1.1); border-color:rgba(255,107,0,0.4); }
.pmk-sw.active { border-color:#ff6b00; box-shadow:0 0 0 1px #ff6b00; }
.pmk-sw img { width:100%; height:100%; object-fit:cover; display:block; }
.pmk-sw-label { position:absolute; bottom:1px; left:0; right:0; text-align:center; font-size:6px; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.95); }
.pmk-none-label { font-size:10px; color:#aaa; cursor:pointer; display:flex; align-items:center; gap:6px; margin-bottom:8px; }

/* CTA - sin precio, sin carrito, solo cotización naranja */
.pmk-cta { margin-top:28px; display:flex; flex-direction:column; gap:8px; }
.pmk-btn-quote {
    background:#ff6b00;
    color:#fff;
    border:none;
    padding:15px;
    font-family:'Bebas Neue',sans-serif;
    font-size:16px;
    letter-spacing:3px;
    border-radius:4px;
    cursor:pointer;
    width:100%;
    transition:background .2s;
    text-align:center;
    text-decoration:none;
    display:block;
}
.pmk-btn-quote:hover { background:#e55e00; color:#fff; }

.pmk-config::-webkit-scrollbar { width:3px; }
.pmk-config::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:2px; }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
    .pmk-grid { grid-template-columns:repeat(2,1fr); }
    #pmk-catalogo { padding-top:40px; }
    .pmk-producto-inner { grid-template-columns:1fr; min-height:auto; }
    .pmk-preview { position:relative; top:0; height:auto; min-height:300px; padding:24px; }
    .pmk-config { max-height:none; padding:20px; }
}