/* ============================================================
   Veloura Premium UI Layer
   ------------------------------------------------------------
   Visual refinement only. This file intentionally does NOT
   override the search suggestions/results components:
   .global-search-results, .global-search-result-*,
   .global-search-empty, .global-search-all, .home-search-results.
============================================================ */

:root {
    --vel-lux-surface: rgba(255, 253, 249, 0.92);
    --vel-lux-surface-solid: #fffdf9;
    --vel-lux-surface-muted: rgba(251, 245, 238, 0.82);
    --vel-lux-line: rgba(195, 161, 106, 0.22);
    --vel-lux-line-strong: rgba(195, 161, 106, 0.42);
    --vel-lux-glow: rgba(195, 161, 106, 0.16);
    --vel-lux-shadow-sm: 0 12px 34px rgba(49, 47, 19, 0.07), 0 2px 8px rgba(49, 47, 19, 0.035);
    --vel-lux-shadow-md: 0 22px 58px rgba(49, 47, 19, 0.10), 0 6px 18px rgba(49, 47, 19, 0.045);
    --vel-lux-shadow-lg: 0 34px 90px rgba(49, 47, 19, 0.13), 0 10px 28px rgba(49, 47, 19, 0.055);
    --vel-lux-radius: 26px;
    --vel-lux-radius-lg: 34px;
    --vel-lux-ease: cubic-bezier(.2, .75, .25, 1);
}

html {
    scrollbar-color: rgba(97, 96, 61, 0.48) rgba(249, 242, 233, 0.75);
    scrollbar-width: thin;
}

body {
    background:
        radial-gradient(circle at 4% 12%, rgba(195, 161, 106, 0.10), transparent 27rem),
        radial-gradient(circle at 96% 38%, rgba(97, 96, 61, 0.055), transparent 31rem),
        var(--background);
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    content: "";
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.15), transparent 48%);
}

main {
    isolation: isolate;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgba(195, 161, 106, 0.9);
    outline-offset: 3px;
}

/* ============================================================
   Shared rhythm / headings / Bootstrap surfaces
============================================================ */

.page-eyebrow {
    gap: 11px;
    font-size: 0.69rem;
    letter-spacing: 0.19em;
}

.page-eyebrow::before {
    width: 30px;
    background: linear-gradient(90deg, var(--secondary), rgba(195, 161, 106, 0.25));
}

.card:not(.product-card),
.surface-card {
    border-color: rgba(236, 225, 209, 0.92) !important;
    background: var(--vel-lux-surface);
    box-shadow: var(--vel-lux-shadow-sm) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.card:not(.product-card) {
    transition:
        transform 260ms var(--vel-lux-ease),
        box-shadow 260ms var(--vel-lux-ease),
        border-color 260ms var(--vel-lux-ease);
}

.card:not(.product-card):hover {
    border-color: rgba(195, 161, 106, 0.32) !important;
    box-shadow: var(--vel-lux-shadow-md) !important;
}

.card-header {
    border-color: rgba(236, 225, 209, 0.88) !important;
    background: rgba(255, 253, 249, 0.78) !important;
}

.badge {
    font-weight: 700;
    letter-spacing: 0.025em;
}

.alert {
    border-color: rgba(236, 225, 209, 0.92);
    background: rgba(255, 253, 249, 0.92);
    box-shadow: var(--vel-lux-shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ============================================================
   Forms
============================================================ */

.form-label {
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.form-control,
.form-select {
    min-height: 52px;
    border-color: rgba(140, 134, 106, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

textarea.form-control {
    min-height: 120px;
    height: auto;
}

.form-control:hover,
.form-select:hover {
    border-color: rgba(195, 161, 106, 0.40);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(195, 161, 106, 0.72);
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(195, 161, 106, 0.10),
        0 10px 26px rgba(49, 47, 19, 0.055);
}

.input-group {
    border-radius: 14px;
}

.input-group-text {
    border-color: rgba(140, 134, 106, 0.24);
    color: var(--primary);
    background: rgba(251, 245, 238, 0.86);
}

.form-check-input:checked {
    border-color: var(--primary);
    background-color: var(--primary);
}

/* ============================================================
   Buttons
============================================================ */

.btn {
    position: relative;
    overflow: hidden;
    min-height: 46px;
    padding-inline: 21px;
    box-shadow: none;
}

.btn::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    content: "";
    background: linear-gradient(115deg, transparent 10%, rgba(255,255,255,.18) 45%, transparent 70%);
    opacity: 0;
    transform: translateX(-35%);
    transition: opacity 220ms ease, transform 420ms var(--vel-lux-ease);
}

.btn:hover::after {
    opacity: 1;
    transform: translateX(35%);
}

.btn-brand {
    border-color: rgba(69, 67, 34, 0.90);
    box-shadow: 0 12px 26px rgba(69, 67, 34, 0.18), inset 0 1px 0 rgba(255,255,255,.14);
}

.btn-brand:hover,
.btn-brand:focus {
    box-shadow: 0 17px 34px rgba(69, 67, 34, 0.24);
}

.btn-outline-dark {
    border-color: rgba(97, 96, 61, 0.23);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn-add-cart {
    box-shadow: 0 12px 26px rgba(195, 161, 106, 0.23), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ============================================================
   Navbar — result dropdown intentionally untouched
============================================================ */

.veloura-navbar {
    padding-block: 9px;
    border-bottom-color: rgba(236, 225, 209, 0.78);
    background: rgba(249, 242, 233, 0.88);
    box-shadow: 0 8px 32px rgba(49, 47, 19, 0.055);
    backdrop-filter: blur(24px) saturate(1.12);
    -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.brand-logo {
    filter: drop-shadow(0 5px 12px rgba(49, 47, 19, 0.08));
}

.nav-link {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.nav-icon,
.nav-user-button {
    transition:
        transform 220ms var(--vel-lux-ease),
        border-color 220ms ease,
        background 220ms ease,
        color 220ms ease;
}

.nav-icon:hover,
.nav-user-button:hover {
    transform: translateY(-2px);
}

.dropdown-menu {
    overflow: hidden;
    padding: 8px;
    border: 1px solid rgba(236, 225, 209, 0.92);
    border-radius: 18px;
    background: rgba(255, 253, 249, 0.98);
    box-shadow: var(--vel-lux-shadow-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.dropdown-item {
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 0.79rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--primary-dark);
    background: rgba(195, 161, 106, 0.11);
}

/* ============================================================
   Hero / home (search results styling is excluded)
============================================================ */

.hero-section {
    padding-top: 88px;
    border-bottom-color: rgba(236, 225, 209, 0.82);
    background:
        radial-gradient(circle at 79% 15%, rgba(195, 161, 106, 0.22), transparent 24rem),
        radial-gradient(circle at 11% 88%, rgba(97, 96, 61, 0.075), transparent 27rem),
        linear-gradient(135deg, #fbf5ed, #f8efe5 54%, #fbf6ef);
}

.hero-content h1 {
    text-shadow: 0 10px 36px rgba(49, 47, 19, 0.055);
}

.hero-content > p {
    font-size: 1rem;
}

.hero-product-shape {
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow:
        0 34px 78px rgba(69, 67, 34, 0.25),
        inset 0 1px 0 rgba(255,255,255,.20);
}

.hero-orbit-large {
    box-shadow: inset 0 0 60px rgba(195, 161, 106, 0.045);
}

.hero-note {
    border-color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 253, 249, 0.82);
    box-shadow: var(--vel-lux-shadow-sm);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.home-search-card {
    border-color: rgba(195, 161, 106, 0.25);
    background:
        radial-gradient(circle at 100% 0%, rgba(195, 161, 106, 0.16), transparent 20rem),
        rgba(255, 253, 249, 0.94);
    box-shadow: var(--vel-lux-shadow-md);
}

.home-global-search-form {
    border-color: rgba(195, 161, 106, 0.30);
    box-shadow: 0 12px 34px rgba(49, 47, 19, 0.065);
}

.home-birthday-banner {
    border-color: rgba(195, 161, 106, 0.30);
    box-shadow: var(--vel-lux-shadow-sm);
}

.smart-home-section,
.product-grid-section {
    position: relative;
}

/* ============================================================
   Product cards
============================================================ */

.product-card {
    border-color: rgba(236, 225, 209, 0.96);
    background: rgba(255, 253, 249, 0.92);
    box-shadow: var(--vel-lux-shadow-sm);
    transform: translateZ(0);
    transition:
        transform 300ms var(--vel-lux-ease),
        border-color 300ms ease,
        box-shadow 300ms var(--vel-lux-ease);
}

.product-card:hover {
    border-color: rgba(195, 161, 106, 0.48);
    box-shadow: var(--vel-lux-shadow-md);
    transform: translateY(-7px);
}

.product-card-media {
    background:
        radial-gradient(circle at 30% 15%, rgba(255,255,255,.80), transparent 44%),
        linear-gradient(145deg, #f4ecdf, #fbf6ef);
}

.product-card-media img {
    transition: transform 520ms var(--vel-lux-ease), filter 320ms ease;
}

.product-card:hover .product-card-media img {
    filter: saturate(1.02) contrast(1.01);
    transform: scale(1.035);
}

.product-wishlist-button {
    border-color: rgba(236, 225, 209, 0.88);
    background: rgba(255, 253, 249, 0.88);
    box-shadow: 0 8px 22px rgba(49, 47, 19, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.product-card-title a {
    transition: color 180ms ease;
}

.product-card:hover .product-card-title a {
    color: var(--primary);
}

.product-card-footer {
    border-top-color: rgba(236, 225, 209, 0.78);
}

/* ============================================================
   Catalog / categories / search page
============================================================ */

.catalog-hero,
.category-detail-hero {
    border-bottom-color: rgba(236, 225, 209, 0.78);
    background:
        radial-gradient(circle at 87% 12%, rgba(195, 161, 106, 0.21), transparent 25rem),
        radial-gradient(circle at 8% 90%, rgba(97, 96, 61, 0.055), transparent 23rem),
        linear-gradient(135deg, #fbf5ed, #f7eee3);
}

.catalog-filter-panel {
    border-color: rgba(236, 225, 209, 0.94);
    background: rgba(255, 253, 249, 0.90);
    box-shadow: var(--vel-lux-shadow-sm);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.catalog-filter-field,
.catalog-toggle {
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.catalog-toggle:hover {
    border-color: rgba(195, 161, 106, 0.42);
    background: rgba(195, 161, 106, 0.07);
}

.category-card {
    border-color: rgba(236, 225, 209, 0.94);
    background: rgba(255, 253, 249, 0.90);
    box-shadow: var(--vel-lux-shadow-sm);
}

.category-card:hover {
    border-color: rgba(195, 161, 106, 0.52);
    box-shadow: var(--vel-lux-shadow-md);
    transform: translateY(-6px);
}

.category-card-media::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(125deg, rgba(255,255,255,.10), transparent 42%);
}

.catalog-pagination a,
.catalog-pagination span {
    box-shadow: 0 8px 20px rgba(49, 47, 19, 0.045);
}

.catalog-empty {
    border-color: rgba(195, 161, 106, 0.22);
    background: rgba(255, 253, 249, 0.86);
    box-shadow: var(--vel-lux-shadow-sm);
}

/* ============================================================
   Product details
============================================================ */

.product-detail-page {
    background:
        radial-gradient(circle at 90% 8%, rgba(195, 161, 106, 0.10), transparent 25rem),
        linear-gradient(180deg, rgba(251, 245, 238, 0.82), rgba(249, 242, 233, 0) 470px);
}

.main-image {
    border-color: rgba(236, 225, 209, 0.94);
    background: rgba(255, 253, 249, 0.88);
    box-shadow: var(--vel-lux-shadow-md);
}

.thumbnail-button {
    border-color: rgba(236, 225, 209, 0.94);
    background: rgba(255, 253, 249, 0.88);
}

.thumbnail-button:hover,
.thumbnail-button.active,
.thumbnail-button:has(.thumbnail.active) {
    border-color: var(--secondary);
    box-shadow: 0 10px 24px rgba(195, 161, 106, 0.15);
}

.product-info {
    position: relative;
}

.product-detail-facts,
.product-detail-assurance,
.product-tabs,
.product-review-card,
.product-review-form-card {
    border-color: rgba(236, 225, 209, 0.92);
    background: rgba(255, 253, 249, 0.86);
    box-shadow: var(--vel-lux-shadow-sm);
}

.product-detail-actions {
    padding: 18px;
    border: 1px solid rgba(236, 225, 209, 0.88);
    border-radius: 20px;
    background: rgba(255, 253, 249, 0.68);
}

.product-tabs .nav-tabs {
    border-bottom-color: rgba(236, 225, 209, 0.92);
}

.product-tabs .nav-link.active {
    color: var(--primary-dark);
    background: rgba(195, 161, 106, 0.08);
}

/* ============================================================
   Cart / checkout / coupon surfaces
============================================================ */

.cart-page,
.checkout-page {
    background:
        radial-gradient(circle at 95% 5%, rgba(195, 161, 106, 0.10), transparent 27rem),
        linear-gradient(180deg, rgba(251, 245, 238, 0.84), rgba(249, 242, 233, 0) 480px);
}

.cart-count-pill {
    border-color: rgba(195, 161, 106, 0.24);
    background: rgba(255, 253, 249, 0.84);
    box-shadow: 0 8px 22px rgba(49, 47, 19, 0.045);
}

.cart-item,
.cart-summary-card,
.checkout-section,
.checkout-summary {
    border-color: rgba(236, 225, 209, 0.94);
    background: rgba(255, 253, 249, 0.90);
    box-shadow: var(--vel-lux-shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cart-item {
    transition: transform 240ms var(--vel-lux-ease), border-color 240ms ease, box-shadow 240ms ease;
}

.cart-item:hover {
    border-color: rgba(195, 161, 106, 0.36);
    box-shadow: var(--vel-lux-shadow-md);
    transform: translateY(-2px);
}

.cart-item-media,
.checkout-product-media {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.8), transparent 45%),
        var(--surface);
}

.quantity-control {
    border-color: rgba(140, 134, 106, 0.22);
    background: rgba(255,255,255,.82);
}

.coupon-panel,
.birthday-cart-notice,
.checkout-birthday-notice {
    border-color: rgba(195, 161, 106, 0.26);
    background: linear-gradient(135deg, rgba(195, 161, 106, 0.10), rgba(255, 253, 249, 0.84));
}

.checkout-choice-card,
.checkout-payment-card {
    border-color: rgba(140, 134, 106, 0.20);
    background: rgba(255, 255, 255, 0.74);
    transition:
        border-color 220ms ease,
        transform 220ms var(--vel-lux-ease),
        box-shadow 220ms ease,
        background 220ms ease;
}

.checkout-choice-card:hover,
.checkout-payment-card:hover {
    border-color: rgba(195, 161, 106, 0.50);
    background: rgba(255, 253, 249, 0.96);
    box-shadow: 0 12px 30px rgba(49, 47, 19, 0.065);
    transform: translateY(-2px);
}

.checkout-trust-strip,
.checkout-submit-note,
.cart-security-note {
    color: var(--text-secondary);
}

/* ============================================================
   Account / auth / addresses / profile / sidebar
============================================================ */

.auth-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 17% 20%, rgba(195, 161, 106, 0.14), transparent 25rem),
        radial-gradient(circle at 90% 82%, rgba(97, 96, 61, 0.07), transparent 28rem),
        linear-gradient(135deg, #fbf6ef, #f5ecdf 52%, #faf4ec);
}

.auth-section::before,
.auth-section::after {
    position: absolute;
    border: 1px solid rgba(195, 161, 106, 0.15);
    border-radius: 50%;
    pointer-events: none;
    content: "";
}

.auth-section::before {
    top: -150px;
    right: -90px;
    width: 360px;
    height: 360px;
}

.auth-section::after {
    bottom: -210px;
    left: -150px;
    width: 460px;
    height: 460px;
}

.auth-card {
    position: relative;
    z-index: 1;
    padding: 44px;
    border: 1px solid rgba(236, 225, 209, 0.94);
    border-radius: 28px;
    background: rgba(255, 253, 249, 0.92);
    box-shadow: var(--vel-lux-shadow-lg) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.auth-card:hover {
    transform: none;
}

.auth-card h2 {
    margin-bottom: 10px;
    color: var(--text-primary);
    font-weight: 600;
}

.auth-card a {
    color: var(--primary);
}

.auth-card a:hover {
    color: var(--secondary);
    text-decoration: none;
}

.auth-card .btn-brand {
    min-height: 52px;
    border-radius: 999px;
}

.account-dashboard-hero,
.account-feature-card,
.security-card,
.dashboard-security-card,
.birthday-reward-card,
.dashboard-language-card {
    border-color: rgba(236, 225, 209, 0.92);
    background: rgba(255, 253, 249, 0.88);
    box-shadow: var(--vel-lux-shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.account-dashboard-hero {
    border-radius: 30px;
    background:
        radial-gradient(circle at 92% 4%, rgba(195, 161, 106, 0.16), transparent 20rem),
        rgba(255, 253, 249, 0.90);
}

.account-feature-card {
    border-radius: 24px;
    transition:
        transform 260ms var(--vel-lux-ease),
        box-shadow 260ms var(--vel-lux-ease),
        border-color 260ms ease;
}

.account-feature-card:hover {
    border-color: rgba(195, 161, 106, 0.42);
    box-shadow: var(--vel-lux-shadow-md);
    transform: translateY(-5px);
}

.account-feature-icon,
.security-card-icon,
.birthday-reward-icon,
.auth-security-icon {
    box-shadow: inset 0 0 0 1px rgba(195, 161, 106, 0.12);
}

.list-group {
    overflow: hidden;
    padding: 8px;
    border: 1px solid rgba(236, 225, 209, 0.92);
    border-radius: 20px;
    background: rgba(255, 253, 249, 0.86);
    box-shadow: var(--vel-lux-shadow-sm);
}

.list-group-item {
    margin-bottom: 3px;
    padding: 11px 13px;
    border: 0;
    border-radius: 12px !important;
    color: var(--text-secondary);
    background: transparent;
    font-size: 0.80rem;
    font-weight: 600;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.list-group-item:last-child {
    margin-bottom: 0;
}

.list-group-item:hover,
.list-group-item.active {
    color: var(--primary-dark);
    background: rgba(195, 161, 106, 0.11);
    transform: translateX(2px);
}

.profile-avatar-image {
    border: 4px solid rgba(255, 253, 249, 0.94);
    box-shadow: 0 14px 34px rgba(49, 47, 19, 0.16) !important;
}

/* ============================================================
   Orders (legacy Bootstrap-heavy pages + order detail)
============================================================ */

.order-detail-header-actions .btn {
    min-height: 44px;
}

.order-item-thumbnail,
.order-item-placeholder {
    border: 1px solid rgba(236, 225, 209, 0.90);
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(49, 47, 19, 0.055);
}

.order-status-badge,
.order-status-chip {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.shipping-info-icon,
.shipping-card-icon {
    border: 1px solid rgba(195, 161, 106, 0.18);
    background: rgba(195, 161, 106, 0.10);
}

.shipping-status-box,
.delivery-time-box,
.delivery-notes-box {
    border: 1px solid rgba(236, 225, 209, 0.86);
    border-radius: 16px;
}

.timeline-icon {
    box-shadow: 0 6px 16px rgba(49, 47, 19, 0.06);
}

/* ============================================================
   Wishlist / success / payment
============================================================ */

.wishlist-header {
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(236, 225, 209, 0.85);
}

.wishlist-empty,
.empty-cart-card,
.payment-return-card {
    border-color: rgba(236, 225, 209, 0.92);
    background: rgba(255, 253, 249, 0.91);
    box-shadow: var(--vel-lux-shadow-md);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.payment-return-page {
    background:
        radial-gradient(circle at 85% 8%, rgba(195, 161, 106, 0.17), transparent 25rem),
        radial-gradient(circle at 10% 80%, rgba(97, 96, 61, 0.06), transparent 28rem),
        linear-gradient(180deg, #faf4ec, #fffdf9);
}

.payment-return-icon {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 12px 28px rgba(49, 47, 19, 0.08);
}

/* ============================================================
   Skin analysis
============================================================ */

.skin-analysis-page,
.skin-questionnaire-page,
.skin-profile-page {
    background:
        radial-gradient(circle at 92% 7%, rgba(195, 161, 106, 0.10), transparent 27rem),
        var(--background);
}

.skin-analysis-hero {
    background:
        radial-gradient(circle at 84% 18%, rgba(195, 161, 106, 0.18), transparent 32%),
        radial-gradient(circle at 14% 86%, rgba(97, 96, 61, 0.07), transparent 30%),
        linear-gradient(135deg, #fbf5ed 0%, #f3e6d1 52%, #ede1cc 100%);
}

.skin-analysis-visual-card,
.skin-analysis-feature-card,
.skin-analysis-latest-card,
.skin-question-card,
.skin-profile-summary-card,
.skin-profile-concern-card,
.skin-routine-card,
.skin-profile-recommendation-card,
.skin-profile-management {
    border-color: rgba(236, 225, 209, 0.94);
    background: rgba(255, 253, 249, 0.90);
    box-shadow: var(--vel-lux-shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.skin-analysis-feature-card,
.skin-profile-concern-card,
.skin-profile-recommendation-card {
    transition:
        transform 260ms var(--vel-lux-ease),
        box-shadow 260ms var(--vel-lux-ease),
        border-color 260ms ease;
}

.skin-analysis-feature-card:hover,
.skin-profile-concern-card:hover,
.skin-profile-recommendation-card:hover {
    border-color: rgba(195, 161, 106, 0.42);
    box-shadow: var(--vel-lux-shadow-md);
    transform: translateY(-5px);
}

.skin-analysis-button,
.skin-questionnaire-button {
    box-shadow: 0 12px 28px rgba(69, 67, 34, 0.14);
}

.skin-questionnaire-progress-track {
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(49, 47, 19, 0.08);
}

.skin-question-choice {
    transition:
        transform 200ms var(--vel-lux-ease),
        border-color 200ms ease,
        box-shadow 200ms ease,
        background 200ms ease;
}

.skin-question-choice:hover {
    border-color: rgba(195, 161, 106, 0.48);
    box-shadow: 0 10px 24px rgba(49, 47, 19, 0.055);
    transform: translateY(-1px);
}

/* ============================================================
   Footer
============================================================ */

.site-footer {
    position: relative;
    overflow: hidden;
    padding-top: 82px;
    background:
        radial-gradient(circle at 88% -5%, rgba(195, 161, 106, 0.24), transparent 27rem),
        radial-gradient(circle at 5% 100%, rgba(195, 161, 106, 0.08), transparent 30rem),
        linear-gradient(135deg, #3f3e20, var(--primary-dark));
}

.site-footer::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(195, 161, 106, 0.62), transparent);
}

.footer-brand {
    letter-spacing: 0.09em;
}

.footer-links a {
    transition: color 180ms ease, transform 180ms ease;
}

.footer-links a:hover {
    transform: translateX(2px);
}

/* ============================================================
   Responsive polish
============================================================ */

@media (max-width: 991.98px) {
    .veloura-navbar .navbar-collapse {
        margin-top: 10px;
        padding: 14px;
        border: 1px solid rgba(236, 225, 209, 0.90);
        border-radius: 20px;
        background: rgba(255, 253, 249, 0.95);
        box-shadow: var(--vel-lux-shadow-md);
    }

    .auth-card {
        padding: 36px 30px;
    }

    .card:not(.product-card):hover,
    .account-feature-card:hover,
    .product-card:hover,
    .category-card:hover,
    .skin-analysis-feature-card:hover,
    .skin-profile-concern-card:hover,
    .skin-profile-recommendation-card:hover {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    body::before {
        display: none;
    }

    .hero-section {
        padding-top: 60px;
    }

    .home-search-card {
        border-radius: 24px;
    }

    .auth-card {
        padding: 30px 22px;
        border-radius: 24px;
    }

    .card:not(.product-card),
    .surface-card,
    .account-dashboard-hero,
    .payment-return-card {
        border-radius: 22px !important;
    }

    .site-footer {
        padding-top: 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}