@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --shell-ink: #132238;
    --shell-muted: #5c6b80;
    --shell-bg: #f5efe3;
    --shell-card: rgba(255, 255, 255, 0.78);
    --shell-card-strong: rgba(255, 255, 255, 0.92);
    --shell-border: rgba(19, 34, 56, 0.08);
    --shell-border-strong: rgba(19, 34, 56, 0.14);
    --shell-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    --shell-shadow-deep: 0 24px 65px rgba(15, 23, 42, 0.14);
    --shell-secondary: #ef476f;
    --shell-highlight: #ffb703;
    --shell-success: #1f9d74;
    --shell-warning: #fb8500;
    --shell-glow: linear-gradient(135deg, rgba(255, 183, 3, 0.18) 0%, rgba(139, 92, 246, 0.18) 50%, rgba(239, 71, 111, 0.18) 100%);
    --shell-brand: var(--primary, #8b5cf6);
    --display-font: 'Fraunces', serif;
    --body-shell-font: 'Manrope', var(--body-font, 'Plus Jakarta Sans'), sans-serif;
    --nav-shell-height: 96px;
    --shell-width: 1400px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--shell-ink);
    font-family: var(--body-shell-font) !important;
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 183, 3, 0.18) 0%, transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(37, 99, 235, 0.12) 0%, transparent 24%),
        radial-gradient(circle at 84% 78%, rgba(16, 185, 129, 0.14) 0%, transparent 26%),
        radial-gradient(circle at 22% 88%, rgba(239, 71, 111, 0.12) 0%, transparent 24%),
        linear-gradient(180deg, #faf6ef 0%, var(--shell-bg) 48%, #f8f4eb 100%) !important;
    padding-top: calc(var(--nav-shell-height) + 18px) !important;
    position: relative;
    overflow-x: hidden;
}

body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    background-image:
        linear-gradient(rgba(19, 34, 56, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(19, 34, 56, 0.018) 1px, transparent 1px);
    background-size: 120px 120px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.8), transparent 82%);
}

body::after {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.75), transparent 48%),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.24), transparent 40%);
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.24s ease;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.section-title,
.sec-title,
.box-title,
.result-count,
.gram-title {
    font-family: var(--display-font);
    color: var(--shell-ink);
    letter-spacing: -0.03em;
}

.container,
.footer-container,
.nav-content {
    max-width: var(--shell-width);
}

.page-header > *,
.page-hero > *,
.contact-info > *,
.hero-ad > *,
.footer-banner > *,
.main-footer .footer-container,
.nav-content {
    position: relative;
    z-index: 1;
}

.page-header,
.page-hero,
.cms-page-card,
.contact-form,
.cms-content-section,
.cart-card,
.bill-box,
.section-box,
.summary-card,
.sidebar,
.order-card,
.card:not(.product-card),
.store-header-card,
.store-card,
.toolbar,
.sticky-filters,
.stories-container,
.contact-info,
.rv-card {
    background: linear-gradient(180deg, var(--shell-card-strong) 0%, var(--shell-card) 100%) !important;
    border: 1px solid var(--shell-border) !important;
    box-shadow: var(--shell-shadow) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 28px !important;
}

.page-header,
.page-hero {
    position: relative;
    overflow: hidden;
    padding: 34px 36px !important;
    margin-bottom: 28px !important;
    border-radius: 34px !important;
}

.page-header::before,
.page-hero::before,
.store-header-card::after,
.store-card::after,
.order-card::after,
.summary-card::after,
.bill-box::after {
    content: '';
    position: absolute;
    inset: auto auto -72px -20px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--shell-glow);
    opacity: 0.7;
    pointer-events: none;
}

.page-header::after,
.page-hero::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(31, 157, 116, 0.12) 0%, rgba(37, 99, 235, 0.06) 100%);
    pointer-events: none;
}

.page-title,
.page-header h1,
.page-hero h1,
.cms-page-card h1 {
    margin: 0 0 8px;
    font-size: clamp(2rem, 3vw, 3.2rem);
    line-height: 0.98;
}

.page-header p,
.page-sub,
.page-breadcrumb,
.breadcrumb,
.subtitle,
.v-sub {
    color: var(--shell-muted) !important;
}

.page-breadcrumb,
.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--shell-border);
}

.page-breadcrumb a,
.breadcrumb a {
    color: var(--shell-brand) !important;
    font-weight: 700;
}

.cart-grid,
.checkout-grid,
.layout-grid,
.grid-layout,
.shop-layout,
.contact-grid,
.track-wrap .layout {
    gap: 26px !important;
}

.steps-box,
.sticky-filters,
.toolbar {
    padding: 18px 20px !important;
    border-radius: 26px !important;
}

.step,
.filter-pill,
.tab-btn,
.status-badge,
.status-pill {
    font-weight: 800 !important;
}

.step-line {
    height: 3px !important;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 183, 3, 0.14), rgba(139, 92, 246, 0.16), rgba(31, 157, 116, 0.14)) !important;
}

.page-hero,
.contact-info,
.ad-card,
.hero-ad,
.footer-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(31, 157, 116, 0.86) 52%, rgba(255, 183, 3, 0.72) 100%) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 26px 70px rgba(19, 34, 56, 0.22) !important;
    border-radius: 34px !important;
}

.page-hero h1,
.page-hero p,
.contact-info h2,
.contact-info p,
.contact-detail,
.hero-ad h2,
.hero-ad p,
.footer-banner h2,
.footer-banner p,
.ad-card {
    color: #ffffff !important;
}

.hero-ad::before,
.footer-banner::before,
.contact-info::before,
.ad-card::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    right: -90px;
    top: -110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.11);
}

.hero-ad::after,
.footer-banner::after,
.contact-info::after,
.ad-card::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    left: -40px;
    bottom: -80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.hero-card,
.promo-block {
    border-radius: 30px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.78)) !important;
    border: 1px solid rgba(19, 34, 56, 0.07) !important;
    box-shadow: var(--shell-shadow) !important;
}

.hero-card h2 {
    color: var(--shell-ink) !important;
}

.hero-slider {
    margin: 18px 0 34px !important;
    overflow: visible !important;
}

.hero-card {
    min-height: 260px !important;
    padding: 42px !important;
}

.hero-card p {
    color: var(--shell-muted) !important;
    max-width: 70%;
}

.gram-section {
    background: linear-gradient(135deg, rgba(19, 34, 56, 0.92) 0%, rgba(37, 99, 235, 0.7) 42%, rgba(139, 92, 246, 0.4) 100%) !important;
    border-radius: 34px !important;
    box-shadow: 0 28px 70px rgba(19, 34, 56, 0.18) !important;
}

.gram-title,
.gram-link,
.gram-info-title {
    color: #ffffff !important;
}

.gram-link,
.gram-info-price,
.hero-btn.hero-btn-outline {
    color: #ffe08a !important;
}

.cms-page-wrapper {
    max-width: 1080px !important;
    padding: 36px 20px 0 !important;
}

.cms-page-card,
.contact-form,
.contact-info,
.cms-content-section {
    padding: 42px !important;
}

.store-card:hover,
.order-card:hover,
.rv-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shell-shadow-deep) !important;
}

.hero-ad,
.footer-banner,
.store-header-card,
.stories-container {
    margin-bottom: 24px;
}

.hero-btn,
.footer-btn,
.btn-shop,
.coupon-btn,
.place-btn,
.btn-track,
.submit-btn,
.btn-save,
.ad-btn,
.back-btn,
.btn-back {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 24px !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, var(--shell-brand) 0%, var(--shell-secondary) 100%) !important;
    box-shadow: 0 18px 35px rgba(139, 92, 246, 0.22);
}

input:not([type='radio']):not([type='checkbox']),
select,
textarea,
.form-control,
.coupon-inp {
    border-radius: 20px !important;
    border: 1px solid rgba(19, 34, 56, 0.1) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

input:not([type='radio']):not([type='checkbox']):focus,
select:focus,
textarea:focus,
.form-control:focus,
.coupon-inp:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 0 5px rgba(139, 92, 246, 0.08), 0 18px 35px rgba(19, 34, 56, 0.08) !important;
}

.filter-pill,
.tab-btn,
.back-btn,
.addr-card.selected,
.pay-option.selected {
    border-color: rgba(139, 92, 246, 0.24) !important;
}

.filter-pill.active,
.tab-btn.active,
.addr-card.selected,
.pay-option.selected {
    background: linear-gradient(135deg, rgba(255, 183, 3, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%) !important;
}

.stories-container {
    padding: 20px 22px !important;
}

.story-item:hover {
    transform: translateY(-4px) scale(1.01) !important;
}

.story-ring {
    box-shadow: 0 16px 28px rgba(139, 92, 246, 0.18) !important;
}

.footer-banner {
    padding: 42px !important;
}

.navbar {
    min-height: var(--nav-shell-height);
    padding: 16px 22px !important;
    background: rgba(250, 248, 244, 0.7) !important;
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    border-bottom: 1px solid var(--shell-border) !important;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.06) !important;
}

.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.56));
}

.navbar::after {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% - 1px);
    width: min(78vw, 1080px);
    height: 26px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 183, 3, 0.16) 0%, rgba(139, 92, 246, 0.1) 38%, transparent 72%);
    filter: blur(10px);
}

.logo-img {
    max-height: 66px !important;
    max-width: 230px !important;
    filter: drop-shadow(0 8px 18px rgba(19, 34, 56, 0.08));
}

.search-container input,
.location-box,
.action-item,
.dropdown-menu,
.nav-city-dropdown,
.bottom-nav {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), var(--shell-shadow) !important;
}

.search-container input,
.location-box,
.action-item {
    border-radius: 20px !important;
    border-color: var(--shell-border) !important;
}

.location-box {
    min-width: 180px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 250, 251, 0.78)) !important;
    padding: 12px 16px !important;
}

.loc-label {
    color: var(--shell-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.loc-current {
    color: var(--shell-ink) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

.loc-current .fa-location-dot {
    color: var(--shell-secondary) !important;
}

.nav-city-dropdown,
.dropdown-menu {
    background: rgba(255, 255, 255, 0.97) !important;
    border-radius: 24px !important;
    border: 1px solid var(--shell-border) !important;
}

.city-option,
.dropdown-menu a {
    border-radius: 16px;
    font-weight: 700 !important;
}

.city-option:hover,
.dropdown-menu a:hover {
    background: var(--shell-glow) !important;
}

.search-container input {
    height: 58px;
    padding-left: 56px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 250, 251, 0.76)) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.action-item i,
.search-icon {
    color: var(--shell-brand) !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
}

.action-item {
    padding: 12px 15px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.action-item.icon-only {
    width: 48px;
    height: 48px;
    justify-content: center;
    padding: 0 !important;
}

.notif-badge {
    box-shadow: 0 0 0 4px rgba(239, 71, 111, 0.12) !important;
}

.cart-btn {
    background: linear-gradient(135deg, #1f9d74 0%, #5ecf8f 100%) !important;
}

.cart-badge,
.mobile-cart-badge {
    background: linear-gradient(135deg, #ffd166 0%, #ffb703 100%) !important;
    color: var(--shell-ink) !important;
}

.bottom-nav {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--shell-border) !important;
}

.b-nav-item {
    border-radius: 18px;
    color: #76859a !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.b-nav-item.active,
.b-nav-item:hover {
    color: var(--shell-ink) !important;
    background: rgba(255, 255, 255, 0.72);
}

.b-nav-item.active i,
.b-nav-item:hover i {
    color: var(--shell-brand) !important;
}

.main-footer {
    margin-top: 72px;
    padding: 72px 0 28px;
    background: linear-gradient(180deg, #111b2d 0%, #1a2740 48%, #101a2c 100%) !important;
    border-radius: 38px 38px 0 0;
    position: relative;
    overflow: hidden;
}

.main-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 22%, rgba(255, 183, 3, 0.14) 0%, transparent 30%),
        radial-gradient(circle at 88% 14%, rgba(94, 207, 143, 0.14) 0%, transparent 28%),
        radial-gradient(circle at 76% 82%, rgba(139, 92, 246, 0.18) 0%, transparent 24%);
}

.footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr !important;
    gap: 34px !important;
}

.footer-heading {
    color: #ffffff !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
    font-family: var(--display-font);
}

.footer-links a,
.footer-desc,
.contact-item,
.copyright {
    color: rgba(237, 242, 247, 0.82) !important;
}

.footer-logo-img {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.22));
}

.app-btn,
.social-btn {
    border-radius: 18px !important;
    box-shadow: 0 18px 34px rgba(139, 92, 246, 0.2) !important;
}

.footer-links a:hover,
.social-btn:hover {
    transform: translateY(-2px);
}

@media (max-width: 992px) {
    body {
        padding-top: 84px !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }

    .navbar {
        min-height: 72px;
        padding: 12px 14px !important;
    }

    .page-header,
    .page-hero {
        padding: 28px 22px !important;
        border-radius: 28px !important;
    }

    .hero-card,
    .cms-page-card,
    .contact-form,
    .contact-info,
    .cms-content-section {
        padding: 28px !important;
    }

    .cart-grid,
    .checkout-grid,
    .layout-grid,
    .grid-layout,
    .shop-layout,
    .contact-grid,
    .track-wrap .layout,
    .footer-grid {
        grid-template-columns: 1fr !important;
    }
}