/* Explain: App-specific styles for buttons, cards, input fields, and animations. */
.editorial-kicker {
    color: var(--secondary-color);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.cta-primary,
.cta-secondary {
    min-height: 3.2rem;
    border-radius: 999px;
    padding: 0.9rem 1.35rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.cta-primary {
    background: var(--primary-color);
    color: var(--ivory-color);
    box-shadow: 0 18px 45px rgba(110, 15, 26, 0.22);
}

.cta-primary:hover,
.cta-primary:focus-visible {
    background: var(--primary-hover);
    color: var(--ivory-color);
    transform: translateY(-2px);
}

.cta-secondary {
    border: 1px solid rgba(248, 241, 232, 0.48);
    color: var(--ivory-color);
}

.cta-secondary:hover,
.cta-secondary:focus-visible {
    background: rgba(248, 241, 232, 0.12);
    color: var(--ivory-color);
    transform: translateY(-2px);
}

.product-card,
.service-card,
.quote-card,
.faq-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-soft);
    background: rgba(255, 248, 239, 0.74);
    box-shadow: 0 18px 55px rgba(33, 28, 27, 0.08);
}

.product-card {
    overflow: hidden;
    transition: transform 260ms ease, box-shadow 260ms ease;
}

.product-card:hover {
    transform: translateY(-0.4rem);
    box-shadow: var(--shadow-soft);
}

.fabric-chip {
    animation: chipFloat 4.6s ease-in-out infinite;
    border: 1px solid rgba(248, 241, 232, 0.34);
    background: rgba(248, 241, 232, 0.12);
    backdrop-filter: blur(14px);
}

.fabric-chip:nth-child(2) { animation-delay: 0.45s; }
.fabric-chip:nth-child(3) { animation-delay: 0.9s; }
.fabric-chip:nth-child(4) { animation-delay: 1.35s; }

.contact-field {
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    background: rgba(255, 248, 239, 0.82);
    color: var(--text-color);
    min-height: 3.2rem;
    padding: 0.75rem 1.2rem;
}

.contact-field:focus {
    border-color: var(--accent-color);
    outline: 3px solid rgba(198, 161, 91, 0.22);
}

@keyframes chipFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.55rem); }
}