/*
 * Knop op de productpagina. Bewust een eigen, opvallende stijl in de Veys-huisstijl
 * i.p.v. de standaard `.button` van het thema: die zag er hetzelfde uit als
 * "Toevoegen aan winkelwagen", waardoor niet opviel dat hier het personaliseren
 * begint.
 */
.veys-configurator-cta {
    display: block;
    width: 100%;
    margin: 1em 0;
}

.veys-configurator-cta .veys-configurator-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    width: 100%;
    box-sizing: border-box;
    padding: 0.95em 1.25em;
    border: 2px solid #892a48;
    border-radius: 10px;
    background: #892a48;
    color: #fff;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.veys-configurator-cta .veys-configurator-open:hover,
.veys-configurator-cta .veys-configurator-open:focus {
    background: #6e2139;
    border-color: #6e2139;
    color: #fff;
    box-shadow: 0 6px 18px rgba(137, 42, 72, 0.28);
}

.veys-configurator-cta .veys-configurator-open:active {
    transform: translateY(1px);
}

.veys-configurator-cta .veys-configurator-open:focus-visible {
    outline: 3px solid rgba(137, 42, 72, 0.35);
    outline-offset: 2px;
}

.veys-configurator-cta .veys-configurator-icon {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
}

.veys-configurator-cta .veys-configurator-note {
    margin: 0.5em 0 0;
    color: #4b5563;
    font-size: 0.85em;
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    .veys-configurator-cta .veys-configurator-note {
        color: #9ca3af;
    }
}