/* ═══════════════════════════════════════════════════════
   Flossize — Pattern Customizer (Free Patterns)
   Embedded in free-patterns/article.php
   ═══════════════════════════════════════════════════════ */

.pc-section {
    margin: 3rem 0;
    padding: 2rem;
    background: var(--laine-blanche);
    border: var(--border-bold);
    border-radius: var(--radius-lg, 8px);
}

.pc-title {
    font-size: var(--text-2xl);
    text-align: center;
    color: var(--dmc-garance) !important;
    margin-bottom: 0.5rem;
}

.pc-subtitle {
    text-align: center;
    color: var(--pierre);
    font-size: var(--text-sm);
    margin-bottom: 2rem;
}

.pc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.pc-preview-col {
    position: sticky;
    top: 1rem;
}

.pc-options-col {
    /* scrolls naturally */
}

/* Presets (radio buttons styled as pills) */
.pc-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.pc-preset {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--fil);
    border-radius: var(--radius-sm, 2px);
    cursor: pointer;
    font-size: 0.8rem;
    background: var(--laine-blanche);
    color: var(--laine-noire);
    transition: background var(--fast), color var(--fast);
}

.pc-preset:has(input:checked) {
    background: var(--dmc-garance);
    color: var(--laine-blanche);
    border-color: var(--dmc-garance);
}

.pc-preset input {
    display: none;
}

/* Checkout button */
.pc-checkout {
    width: 100%;
    font-size: 0.95rem;
    padding: 0.75rem;
}

.pc-checkout:hover {
    background: var(--dmc-vermillon);
}

/* Price */
.pc-price {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--dmc-garance);
}

.pc-price-note {
    font-size: 0.75rem;
    color: var(--pierre);
}

/* Responsive */
@media (max-width: 768px) {
    .pc-grid {
        grid-template-columns: 1fr;
    }
    .pc-section {
        padding: 1.25rem;
    }
    .pc-preview-col {
        position: static;
        order: -1;
    }
}

/* ── Email Modal — overrides components.css for higher z-index (pattern customizer context) ── */
.email-overlay{z-index:10000}
.email-modal{box-shadow:0 8px 32px rgba(0,0,0,0.2)}
.email-modal h3{color:var(--dmc-garance)}
.email-modal input[type=email]{padding:0.75rem;border-width:2px}
.email-modal input[type=email]:focus{border-color:var(--dmc-garance)}