/* =============================================================================
 *  Wulks Specs Widget  —  specs.css  v1.0.0
 * ============================================================================= */

/* ── Editor placeholder ──────────────────────────────────────────────────────*/
.wsp-editor-placeholder {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 160px; gap: 10px;
    background: #f3f4f6; border: 2px dashed #d1d5db;
    border-radius: 12px; color: #9ca3af;
    font-size: 14px; text-align: center; padding: 24px;
}
.wsp-editor-placeholder .eicon-table { font-size: 36px; color: #d1d5db; }

/* ── Section shell ───────────────────────────────────────────────────────────*/
.wsp-specs {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    padding: 48px 0 56px;
    width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────────────*/
.wsp-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 32px;
}
.wsp-icon { display: inline-flex; align-items: center; color: #e8730a; }
.wsp-title {
    font-size: 20px; font-weight: 700; color: #111827; margin: 0; letter-spacing: -0.01em;
}
.wsp-brand {
    font-size: 10px; font-weight: 700; color: #e8730a;
    background: #fdf5ef; border: 1px solid #fcd9bb;
    padding: 2px 9px; border-radius: 20px;
    letter-spacing: 0.05em; text-transform: uppercase;
}

/* ── Groups ──────────────────────────────────────────────────────────────────*/
.wsp-group { margin-bottom: 36px; }
.wsp-group:last-child { margin-bottom: 0; }
.wsp-group-title {
    font-size: 12px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.09em;
    margin: 0 0 14px; padding-bottom: 10px;
    border-bottom: 2px solid #e5e7eb;
}

/* ── Specs grid ──────────────────────────────────────────────────────────────*/
.wsp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--wsp-col, 200px), 1fr));
    gap: 1px;
    background: #e5e7eb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    margin: 0; padding: 0;
}

.wsp-row {
    background: #ffffff;
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 5px;
}

.wsp-key {
    font-size: 11px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.07em; margin: 0;
}
.wsp-val {
    font-size: 15px; font-weight: 600; color: #111827;
    margin: 0; line-height: 1.35;
}

/* ── Responsive ──────────────────────────────────────────────────────────────*/
@media (max-width: 900px) {
    .wsp-specs { padding: 36px 0 44px; }
    .wsp-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .wsp-specs { padding: 28px 0 48px; }
    .wsp-grid  { grid-template-columns: repeat(2, 1fr); }
    .wsp-row   { padding: 10px 14px; }
    .wsp-val   { font-size: 14px; }
}

@media (max-width: 360px) {
    .wsp-grid { grid-template-columns: 1fr; }
}