/* Strawberry pastel storefront theme
 * Fixed light palette inspired by the pink/peach/lavender shop logo. Client pages only.
 */
:root {
    color-scheme: light;
    --primary: #ff72b6 !important;
    --primary1: #ff9b7d !important;
    --berry: #b73170;
    --berry-deep: #c93f7c;
    --peach: #ff9b7d;
    --peach-soft: #ffd1c4;
    --lavender: #c9a7ff;
    --pastel-button: linear-gradient(135deg, #ff9acb 0%, #ffa3c2 48%, #ffc2aa 100%);
    --strawberry-cream: #fffafd;
    --strawberry-surface: #ffffff;
    --strawberry-line: #f4d6e6;
    --body: #fffafd;
    --white: #ffffff;
    --chalk: #fff5fa;
    --border: #f2d5e4;
    --heading: #43293d;
    --text: #76566d;
    --sub-heading: #8b667f;
    --intro-bg: #fff7fb;
    --green-chalk: #effbf4;
    --gray-chalk: #f3e6ed;
    --blue: #a77ae8;
    --primary-bshadow: 0 14px 32px rgba(230, 88, 157, .18);
    --primary-tshadow: 0 2px 8px rgba(165, 52, 112, .18);
}

::selection {
    color: #4a253c;
    background: #ffc2df;
}

body {
    background-color: var(--body) !important;
    background-image:
        radial-gradient(circle at 8% 4%, rgba(255, 114, 182, .06), transparent 28rem),
        radial-gradient(circle at 92% 12%, rgba(201, 167, 255, .06), transparent 26rem),
        linear-gradient(180deg, rgba(255, 255, 255, .32), transparent 30rem);
    background-attachment: fixed;
}

a,
.header-select:hover,
.navbar-link:hover,
.navbar-link.active,
.product-name a:hover,
.modern-product-body h4 a:hover {
    color: var(--berry);
}

.header-top {
    border-bottom: 1px solid rgba(234, 150, 193, .34) !important;
    background: linear-gradient(90deg, #fff5fa 0%, #ffffff 46%, #fff6f0 100%) !important;
    box-shadow: 0 5px 18px rgba(139, 72, 111, .09) !important;
}

.header-part {
    border-bottom: 1px solid rgba(242, 213, 228, .72);
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 8px 28px rgba(117, 62, 96, .08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.navbar-part {
    border-bottom: 1px solid rgba(242, 213, 228, .82) !important;
    background: linear-gradient(90deg, #ffffff 0%, #fff9fc 55%, #fffaf6 100%) !important;
    box-shadow: 0 7px 22px rgba(117, 62, 96, .07);
}

.header-form {
    border-color: #efc8dc !important;
    background: #fff8fc !important;
    box-shadow: inset 0 1px 2px rgba(117, 62, 96, .05), 0 5px 16px rgba(226, 103, 162, .08) !important;
}

.header-form:focus-within {
    border-color: #ff8ec4 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(255, 114, 182, .14), 0 9px 24px rgba(226, 103, 162, .14) !important;
}

.header-form button,
.header-widget i,
.header-user,
.header-src {
    border-color: #f1cce0 !important;
    background: linear-gradient(145deg, #fff2f9, #ffe8f3) !important;
    color: var(--berry) !important;
}

.header-widget:hover i,
.header-user:hover,
.header-src:hover {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--primary), var(--primary1)) !important;
    color: #43293d !important;
    box-shadow: 0 9px 22px rgba(229, 78, 151, .24);
}

.navbar-link::after,
.header-top-list li a::after {
    background: linear-gradient(90deg, var(--primary), var(--primary1)) !important;
}

.navbar-info {
    border-color: #f0d6e3 !important;
}

.navbar-info i {
    color: var(--berry) !important;
}

.nav-hot-badge {
    background: linear-gradient(135deg, #ff5e91, #ff9478) !important;
    box-shadow: 0 4px 12px rgba(242, 81, 137, .24);
}

.dropdown-position-list,
.megamenu,
.nice-select .list,
.category-sidebar,
.cart-sidebar {
    border-color: var(--border) !important;
    background: var(--white) !important;
    box-shadow: 0 18px 45px rgba(115, 55, 91, .16) !important;
}

.dropdown-position-list li a:hover,
.megamenu-list li a:hover,
.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus,
.category-link:hover {
    background: linear-gradient(90deg, rgba(255, 114, 182, .12), rgba(255, 155, 125, .10)) !important;
    color: var(--berry) !important;
}

.megamenu-title::before {
    background: linear-gradient(180deg, var(--primary), var(--primary1)) !important;
}

.account-card,
.feature-card,
.product-card,
.modern-product-card,
.user-form-card,
.contact-card,
.card,
.recent-orders-panel {
    border-color: var(--border) !important;
    background: var(--white) !important;
    box-shadow: 0 10px 30px rgba(117, 62, 96, .09) !important;
}

.account-card,
.feature-card,
.product-card,
.modern-product-card,
.user-form-card,
.contact-card,
.card {
    border-radius: 15px !important;
}

.feature-card:hover,
.product-card:hover,
.modern-product-card:hover,
.account-card:hover {
    border-color: rgba(255, 114, 182, .68) !important;
    box-shadow: 0 16px 38px rgba(224, 82, 151, .17) !important;
}

.modern-product-card {
    position: relative;
    overflow: hidden;
}

.modern-product-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, var(--primary), var(--lavender), var(--primary1));
    opacity: .76;
}

.modern-product-image,
.product-media {
    background: linear-gradient(145deg, #fff5fa, #fff0eb) !important;
}

.btn-primary,
.bg-primary,
.bg-primary-gradient,
.product-add,
button[type="submit"] {
    border-color: transparent !important;
    background: var(--pastel-button) !important;
    color: #43293d !important;
    box-shadow: 0 8px 20px rgba(226, 76, 145, .22);
}

.btn-primary:hover,
.product-add:hover,
button[type="submit"]:hover {
    filter: saturate(1.08) brightness(.98);
    transform: translateY(-1px);
    box-shadow: 0 11px 25px rgba(226, 76, 145, .29);
}

.bg-primary-transparent {
    border: 1px solid rgba(255, 114, 182, .24) !important;
    background: rgba(255, 114, 182, .12) !important;
    color: var(--berry) !important;
}

.form-control,
.form-select,
select,
textarea,
.nice-select {
    border-color: var(--border) !important;
    background-color: var(--white) !important;
    color: var(--heading) !important;
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
.nice-select.open {
    border-color: #ff8fc4 !important;
    box-shadow: 0 0 0 4px rgba(255, 114, 182, .13) !important;
}

.form-control::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--text) 68%, transparent) !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    color: var(--text) !important;
}

.table thead tr,
.table thead th {
    border-color: var(--border) !important;
    background: linear-gradient(90deg, #fff0f7, #fff5f1) !important;
    color: var(--heading) !important;
}

.table tbody tr:hover > * {
    background: rgba(255, 114, 182, .065) !important;
}

.page-link,
.pagination a {
    border-color: var(--border) !important;
    background: var(--white) !important;
    color: var(--berry) !important;
}

.page-link:hover,
.page-item.active .page-link,
.pagination a:hover,
.pagination .active a {
    border-color: transparent !important;
    background: var(--pastel-button) !important;
    color: #43293d !important;
}

.modal-content {
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    background: var(--white) !important;
    color: var(--text) !important;
    box-shadow: 0 24px 70px rgba(82, 38, 65, .25) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--border) !important;
}

.footer-part {
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, #fff8fc 0%, #fff0f7 100%) !important;
}

.footer-bottom {
    border-top-color: #efcede !important;
    background: linear-gradient(90deg, #ffeaf4, #fff2ec) !important;
}

.footer-bottom .footer-copytext a,
.footer-widget a:hover {
    color: var(--berry) !important;
}

::-webkit-scrollbar-thumb {
    border: 2px solid var(--body);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--primary), var(--primary1));
}

::-webkit-scrollbar-track {
    background: var(--body);
}

@media (max-width: 767px) {
    body {
        background-image: linear-gradient(180deg, rgba(255, 114, 182, .06), transparent 18rem);
    }

    .header-part,
    .navbar-part {
        box-shadow: 0 5px 18px rgba(117, 62, 96, .09);
    }

    .account-card,
    .feature-card,
    .product-card,
    .modern-product-card,
    .card {
        border-radius: 12px !important;
    }
}