.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(224, 224, 224, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.glowing-border {
    transition: all 0.3s ease;
}

.glowing-border:hover {
    border-color: rgba(188, 0, 10, 0.4);
    box-shadow: 0 0 15px rgba(188, 0, 10, 0.1);
}

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

.star-fill {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.page-enter {
    animation: pageEnter 0.35s ease;
}

@keyframes pageEnter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.drawer-backdrop {
    background: rgba(26, 28, 28, 0.45);
    backdrop-filter: blur(4px);
}

.cart-drawer {
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.cart-drawer.open {
    transform: translateX(0);
}

.toast-stack {
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    animation: toastIn 0.3s ease;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.qty-btn {
    min-width: 32px;
    height: 32px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.vial-wrap svg {
    width: 100%;
    height: 100%;
}

.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-menu.open {
    max-height: 420px;
}

.modal-enter {
    animation: modalIn 0.25s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.filter-chip.active {
    background: #bc000a;
    color: #fff;
    border-color: #bc000a;
}

.brand-logo {
    display: block;
}