.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.font-handwritten {
    font-family: 'Noto Serif', serif;
    font-style: italic;
}

::-webkit-scrollbar {
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d4c2c2;
    border-radius: 10px;
}

.petal-badge {
    border-radius: 100% 60% 100% 80%;
}

.hero-shell {
    background-color: #f2dfd4;
}

.hero-glass {
    background: rgba(207, 169, 152, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hero-icon {
    background: rgba(226, 231, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.nav-glass {
    background: rgba(123, 84, 85, 0.24);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 14px 40px rgba(84, 56, 49, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.nav-link-shadow {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.mobile-menu[hidden] {
    display: none;
}

.mobile-menu.is-open {
    display: flex;
}

body.mobile-menu-open {
    overflow: hidden;
}

.hero-avatar-ring {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

@media (max-width: 767px) {
    .hero-avatar-ring {
        flex-shrink: 0;
    }
}

.hero-frame {
    background: #f2dfd4;
}

.hero-card {
    background-color: #f2dfd4;
    border: 1px solid rgba(16, 29, 18, 0.65);
    box-shadow:
        0 0 0 1px rgba(6, 12, 8, 0.35),
        0 28px 80px rgba(0, 0, 0, 0.28);
}

.hero-overlay {
    background:
        linear-gradient(180deg, rgba(59, 37, 33, 0.18) 0%, rgba(59, 37, 33, 0.08) 36%, rgba(59, 37, 33, 0.18) 100%);
}

.hero-pill {
    background: rgba(138, 164, 211, 0.38);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hero-subheading {
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.cta-section {
    background: #c98c77;
}

.cta-paper {
    background-image:
        linear-gradient(rgba(255, 252, 248, 0.8), rgba(255, 252, 248, 0.8)),
        url('./assets/ctapaper.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        inset 0 -1px 0 rgba(180, 151, 139, 0.2),
        inset 0 0 0 1px rgba(190, 167, 154, 0.38),
        0 18px 40px rgba(120, 69, 54, 0.12);
}

.subscription-slide {
    display: none;
}

.subscription-slide.is-active {
    display: block;
}

.subscription-dot {
    background: rgba(255, 255, 255, 0.35);
}

.subscription-dot.is-active {
    background: rgba(255, 255, 255, 0.95);
}

.social-cutout {
    border-radius: 2rem;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.65), transparent 34%),
        linear-gradient(180deg, #f7ede6 0%, #f2dfd4 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 20px 50px rgba(150, 102, 84, 0.12);
}

.social-note {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 14px 30px rgba(155, 110, 91, 0.12);
}

.about-story-note {
    background: rgba(255, 252, 249, 0.9);
    box-shadow:
        0 18px 40px rgba(133, 97, 82, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.map-muted {
    filter: saturate(0.72) sepia(0.08) hue-rotate(-10deg) brightness(1.02);
}

.wedding-frame {
    box-shadow:
        0 28px 90px rgba(123, 84, 85, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.polaroid-frame {
    background:
        linear-gradient(180deg, #fffdfa 0%, #f8f1eb 100%);
    box-shadow:
        0 26px 60px rgba(123, 84, 85, 0.14),
        0 10px 18px rgba(123, 84, 85, 0.08);
}

.polaroid-frame--rear {
    box-shadow:
        0 20px 42px rgba(123, 84, 85, 0.1),
        0 8px 14px rgba(123, 84, 85, 0.06);
}

.polaroid-doodle {
    background-image: url('./assets/polaroid-doodle.webp');
}

body.page-shop {
    background:
        radial-gradient(circle at top left, rgba(242, 223, 212, 0.9), transparent 28%),
        linear-gradient(180deg, #fbf9f3 0%, #f7efe8 100%);
}

.paper-panel {
    background:
        linear-gradient(rgba(255, 253, 250, 0.92), rgba(255, 253, 250, 0.92)),
        url('./assets/ctapaper.webp');
    background-size: cover;
    background-position: center;
}

.hero-wash {
    background:
        linear-gradient(135deg, rgba(123, 84, 85, 0.10), rgba(201, 140, 119, 0.02) 50%, rgba(255, 255, 255, 0.4)),
        url('./assets/herobg.webp');
    background-size: cover;
    background-position: center;
}

.hero-copy {
    text-shadow: 0 10px 34px rgba(22, 14, 12, 0.42);
}

.bouquet-card {
    transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}

.bouquet-card:hover {
    transform: translateY(-6px) rotate(-0.15deg);
    box-shadow: 0 24px 50px rgba(123, 84, 85, 0.16);
}

.filter-chip[aria-pressed="true"] {
    background: #7b5455;
    color: #ffffff;
    border-color: #7b5455;
}

.filter-chip {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.sort-select,
.search-input {
    background-color: rgba(255, 255, 255, 0.78);
}

.floating-note {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.product-tag {
    background: rgba(123, 84, 85, 0.08);
}