/* Shared card */
.sh-card {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* Shared buttons */
.sh-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: var(--field-height);
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.sh-btn--primary,
.btn-primary {
    color: #fff;
    background: var(--color-primary);
}

.sh-btn--primary:hover,
.btn-primary:hover {
    color: #fff;
    background: var(--color-primary-light);
}

.sh-btn--accent,
.btn-accent {
    color: #fff;
    background: var(--color-accent);
}

.sh-btn--accent:hover,
.btn-accent:hover {
    color: #fff;
    background: var(--color-accent-dark);
}

/* Apply form styling only inside an intentional wrapper. */
.sh-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.sh-form select,
.sh-form textarea,
.sh-field {
    width: 100%;
    min-height: var(--field-height);
    margin: 0;
    padding: 9px 12px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: 0;
    box-shadow: none;
    font: inherit;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sh-form textarea,
textarea.sh-field {
    min-height: 110px;
    resize: vertical;
}

.sh-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.sh-form select:focus,
.sh-form textarea:focus,
.sh-field:focus {
    background: var(--color-background);
    border-color: var(--color-primary-light);
    box-shadow: var(--focus-ring);
}

.sh-form label,
.sh-field-label {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
}

.sh-form input:disabled,
.sh-form select:disabled,
.sh-form textarea:disabled,
.sh-field:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.section-title {
    margin-bottom: var(--space-xl);
    text-align: center;
}

.section-title h2 {
    margin-bottom: 10px;
    color: var(--color-primary);
    font-size: 32px;
}

.section-title p {
    color: var(--color-text-light);
    font-size: 16px;
}

/* Legacy product-card rules retained for compatibility. */
.product-card {
    overflow: hidden;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform 0.3s ease;
}

.product-card:hover { transform: translateY(-5px); }
.product-card-image img { display: block; width: 100%; }
.product-card-content { padding: 20px; }
.product-card-title { margin-bottom: 10px; font-size: 18px; font-weight: 700; }
.product-card-price { margin-bottom: 15px; color: var(--color-primary); font-weight: 700; }