/*
 * Frontend border-radius controls.
 *
 * This file is intentionally loaded after theme and widget styles. Keep these
 * rules scoped to the homepage builder so backend and legacy standalone views
 * retain their own styling.
 */

body.homepage-builder .appearance-card, .modal-content, .card, .seller-products-stat, .seller-stat {
    border-radius: var(--appearance-card-border-radius, 6px) !important;
}

body.homepage-builder .appearance-input:not(textarea):not([type="checkbox"]):not([type="radio"]) {
    border-radius: var(--appearance-input-border-radius, 6px) !important;
}

/*
 * Textareas stay at a flat 6px — a pill-shaped multi-line box reads badly at
 * any large radius, so this one is deliberately not admin-driven.
 */
body.homepage-builder textarea,
body.homepage-builder .appearance-input.checkout-textarea {
    border-radius: 6px !important;
}

/*
 * Native inputs and selects that do NOT carry .appearance-input (Bootstrap's
 * .form-control / .form-select / .input-group, the theme's .input-style-1)
 * were pinned to a hardcoded 6px, so Appearance → "Input & Select Border
 * Radius" only moved the handful of elements that had the explicit class.
 * They follow the setting now. Scoped to the storefront so the admin and
 * seller panels keep their own styling (rule below).
 */
body.homepage-builder .form-control:not(textarea),
body.homepage-builder .input-style-1:not(textarea),
body.homepage-builder .form-select,
body.homepage-builder select,
body.homepage-builder .input-group,
body.homepage-builder .input-group > .form-control,
body.homepage-builder .input-group > .form-select {
    border-radius: var(--appearance-input-border-radius, 6px) !important;
}

/* Backend / non-storefront: unchanged flat 6px. */
.form-control, .input-style-1, .form-select, .input-group {
    border-radius: 6px !important;
}

body.homepage-builder .appearance-button, .btn, .primary-btn, .btn-1, .primary-btn-1, .btn-2, .payment-chip, button, .seller-section__eyebrow,
.seller-products-nav__links a, .seller-products-chip, .seller-products-hero__eyebrow, .seller-products-section__eyebrow,
.seller-products-nav__links a, .seller-products-chip, .seller-products-badge, .c1t-social
 

{
    border-radius: var(--appearance-button-border-radius, 6px) !important;
}

body.homepage-builder .select2-container .select2-selection {
    border-radius: var(--appearance-input-border-radius, 6px) !important;
}

/*
 * classic-1 (c1t) skin — hero band.
 *
 * style.css ships `.c1t-hero .swiper-slide > div { border-radius: 0 0 28px 28px }`.
 * That selector is (0,2,1); the attempt in custom.css is only (0,2,0), so the
 * hardcoded 28px wins and the hero keeps fat bottom corners while every panel
 * under it follows --appearance-card-border-radius. Result: mismatched corners
 * and a radius setting that does nothing to the hero.
 *
 * Re-point the same selector at the var. The hero now sits beside the category
 * rail (a card, not a full-bleed band), so all four corners round together.
 */
body.homepage-builder .c1t-hero .swiper-slide > div,
body.homepage-builder .c1t2-hero-wrap .hero-five-slider {
    border-radius: var(--appearance-card-border-radius, 6px) !important;
}