/* ============================================================
   VELOURA — Luxury Edition UI Layer
   ------------------------------------------------------------
   Editorial luxury refinement loaded after the existing UI.
   It intentionally does NOT style or inherit custom variables
   into the search result dropdown itself:
   .global-search-results / .global-search-result-* /
   .global-search-empty / .global-search-all /
   .home-search-results remain visually protected.
============================================================ */

:root {
    --lux-ink: #242313;
    --lux-olive: #535335;
    --lux-olive-deep: #35351f;
    --lux-olive-soft: #73704b;
    --lux-gold: #b99052;
    --lux-gold-bright: #d5b276;
    --lux-gold-pale: #ead8b8;
    --lux-ivory: #fffdf8;
    --lux-cream: #f8f0e5;
    --lux-cream-deep: #efe2cf;
    --lux-white-glass: rgba(255, 253, 248, 0.88);
    --lux-dark-glass: rgba(43, 43, 24, 0.94);
    --lux-line: rgba(185, 144, 82, 0.24);
    --lux-line-strong: rgba(185, 144, 82, 0.48);
    --lux-shadow-xs: 0 6px 18px rgba(36, 35, 19, 0.055);
    --lux-shadow-sm: 0 14px 36px rgba(36, 35, 19, 0.075), 0 2px 9px rgba(36, 35, 19, 0.025);
    --lux-shadow-md: 0 24px 62px rgba(36, 35, 19, 0.105), 0 5px 18px rgba(36, 35, 19, 0.035);
    --lux-shadow-lg: 0 38px 96px rgba(36, 35, 19, 0.14), 0 10px 30px rgba(36, 35, 19, 0.05);
    --lux-radius-sm: 14px;
    --lux-radius-md: 20px;
    --lux-radius-lg: 28px;
    --lux-radius-xl: 38px;
    --lux-ease: cubic-bezier(.2, .72, .18, 1);
}

/* ============================================================
   01. Global luxury atmosphere
============================================================ */

body {
    background:
        radial-gradient(circle at 7% 6%, rgba(213, 178, 118, 0.11), transparent 30rem),
        radial-gradient(circle at 92% 34%, rgba(83, 83, 53, 0.065), transparent 35rem),
        linear-gradient(180deg, rgba(255,255,255,.10), transparent 28rem),
        var(--background);
}

body::after {
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .3;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.86) 0 1px, transparent 1.4px),
        radial-gradient(circle at 80% 60%, rgba(185,144,82,.18) 0 1px, transparent 1.4px);
    background-size: 42px 42px, 68px 68px;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.4) 42%, transparent 85%);
}

main {
    overflow: clip;
}

main > section,
main > .container,
main > div {
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-feature-settings: "liga" 1, "kern" 1;
}

.page-shell,
.catalog-page,
.product-detail-page,
.cart-page,
.checkout-page,
.wishlist-page,
.account-dashboard-page,
.payment-return-page,
.skin-analysis-page,
.skin-questionnaire-page,
.skin-profile-page {
    position: relative;
}

.page-shell::before,
.catalog-page::before,
.product-detail-page::before,
.cart-page::before,
.checkout-page::before,
.wishlist-page::before,
.account-dashboard-page::before,
.payment-return-page::before,
.skin-profile-page::before {
    position: absolute;
    z-index: -1;
    top: 2rem;
    right: -8rem;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    pointer-events: none;
    content: "";
    background: radial-gradient(circle, rgba(213,178,118,.10), rgba(213,178,118,0) 68%);
    filter: blur(4px);
}

.page-eyebrow,
.catalog-kicker,
.checkout-section-kicker,
.payment-return-kicker,
.skin-analysis-eyebrow {
    color: var(--lux-gold);
    font-weight: 750;
    letter-spacing: .18em;
}

.page-eyebrow::before {
    height: 1px;
    background: linear-gradient(90deg, var(--lux-gold), rgba(185,144,82,.18));
}

.page-heading h1,
.catalog-hero h1,
.category-detail-hero h1,
.cart-header h1,
.checkout-header h1,
.wishlist-header h1,
.account-dashboard-hero h1,
.skin-analysis-title,
.skin-profile-hero h1 {
    letter-spacing: -.038em;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* ============================================================
   02. Shared cards / bootstrap surfaces
============================================================ */

.card:not(.product-card),
.surface-card,
.catalog-filter-panel,
.checkout-section,
.checkout-summary,
.cart-items-panel,
.cart-summary-column,
.security-card,
.dashboard-language-card,
.dashboard-security-card,
.dashboard-skin-profile-card,
.birthday-reward-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-management,
.payment-return-card {
    position: relative;
    border: 1px solid rgba(185, 144, 82, .20) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,253,248,.93)),
        var(--lux-ivory);
    box-shadow: var(--lux-shadow-sm) !important;
}

.card:not(.product-card)::before,
.surface-card::before,
.catalog-filter-panel::before,
.checkout-section::before,
.checkout-summary::before,
.security-card::before,
.dashboard-language-card::before,
.dashboard-security-card::before,
.dashboard-skin-profile-card::before,
.birthday-reward-card::before,
.skin-analysis-feature-card::before,
.skin-question-card::before,
.skin-profile-summary-card::before,
.skin-routine-card::before,
.payment-return-card::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: clamp(18px, 10%, 58px);
    left: clamp(18px, 10%, 58px);
    height: 1px;
    pointer-events: none;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(213,178,118,.72), transparent);
}

.card:not(.product-card) > *,
.surface-card > *,
.catalog-filter-panel > *,
.checkout-section > *,
.checkout-summary > *,
.security-card > *,
.dashboard-language-card > *,
.dashboard-security-card > *,
.dashboard-skin-profile-card > *,
.birthday-reward-card > *,
.skin-analysis-feature-card > *,
.skin-question-card > *,
.skin-profile-summary-card > *,
.skin-routine-card > *,
.payment-return-card > * {
    position: relative;
    z-index: 1;
}

.card:not(.product-card),
.surface-card {
    border-radius: var(--lux-radius-lg) !important;
}

.card:not(.product-card):hover,
.surface-card:hover {
    border-color: rgba(185, 144, 82, .35) !important;
    box-shadow: var(--lux-shadow-md) !important;
}

.card-header {
    border-bottom: 1px solid rgba(185,144,82,.17) !important;
    background: linear-gradient(180deg, rgba(255,253,248,.96), rgba(248,240,229,.58)) !important;
}

.alert {
    border-radius: var(--lux-radius-md);
    border-color: rgba(185,144,82,.22);
    box-shadow: var(--lux-shadow-xs);
}

.badge,
.rounded-pill {
    letter-spacing: .02em;
}

/* ============================================================
   03. Buttons — polished metal / deep olive
============================================================ */

.btn,
.catalog-cta-button,
.home-birthday-action,
.skin-analysis-button,
.skin-analysis-secondary-button,
.skin-analysis-danger-button,
.skin-questionnaire-button,
.skin-profile-delete-button,
.place-order-button {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .01em;
    transition:
        transform 220ms var(--lux-ease),
        box-shadow 220ms var(--lux-ease),
        border-color 220ms ease,
        background 220ms ease,
        color 220ms ease;
}

.btn-brand,
.btn-dark,
.place-order-button,
.skin-analysis-button,
.skin-questionnaire-button-primary {
    border-color: rgba(53,53,31,.96) !important;
    color: #fffdf8 !important;
    background:
        linear-gradient(135deg, #64603b 0%, #444426 48%, #34341e 100%) !important;
    box-shadow:
        0 15px 32px rgba(53,53,31,.22),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.14) !important;
}

.btn-brand:hover,
.btn-dark:hover,
.place-order-button:hover,
.skin-analysis-button:hover,
.skin-questionnaire-button-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 42px rgba(53,53,31,.29),
        inset 0 1px 0 rgba(255,255,255,.2) !important;
}

.btn-outline-dark,
.btn-outline-brand,
.skin-analysis-secondary-button,
.skin-questionnaire-button-secondary {
    border-color: rgba(185,144,82,.35) !important;
    color: var(--lux-olive-deep) !important;
    background: rgba(255,253,248,.78) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 22px rgba(36,35,19,.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.btn-outline-dark:hover,
.btn-outline-brand:hover,
.skin-analysis-secondary-button:hover,
.skin-questionnaire-button-secondary:hover {
    border-color: rgba(185,144,82,.56) !important;
    color: var(--lux-ink) !important;
    background: linear-gradient(135deg, rgba(234,216,184,.58), rgba(255,253,248,.96)) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(36,35,19,.08);
}

.btn-add-cart,
.catalog-cta-button {
    border: 1px solid rgba(185,144,82,.48) !important;
    color: #2d2a16 !important;
    background: linear-gradient(135deg, #ead8b8 0%, #d8b879 45%, #c49a58 100%) !important;
    box-shadow:
        0 15px 32px rgba(185,144,82,.20),
        inset 0 1px 0 rgba(255,255,255,.6) !important;
}

.btn-add-cart:hover,
.catalog-cta-button:hover {
    color: #211f11 !important;
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(185,144,82,.28) !important;
}

/* ============================================================
   04. Forms
============================================================ */

.form-label {
    margin-bottom: 9px;
    color: #4a482d;
    font-size: .77rem;
    font-weight: 720;
}

.form-control,
.form-select,
.input-group-text {
    border-color: rgba(122,116,82,.20);
    background: rgba(255,255,255,.84);
}

.form-control,
.form-select {
    min-height: 54px;
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 5px 18px rgba(36,35,19,.025);
}

.form-control:hover,
.form-select:hover {
    border-color: rgba(185,144,82,.42);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(185,144,82,.72);
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(185,144,82,.10),
        0 14px 34px rgba(36,35,19,.065);
}

.input-group-text {
    color: var(--lux-gold);
}

.form-check-input {
    border-color: rgba(83,83,53,.30);
}

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

/* ============================================================
   05. Navbar — dropdown results deliberately excluded
============================================================ */

.veloura-navbar {
    padding-block: 10px;
    border-bottom: 1px solid rgba(185,144,82,.20);
    background:
        linear-gradient(180deg, rgba(255,253,248,.94), rgba(248,240,229,.90));
    box-shadow: 0 12px 34px rgba(36,35,19,.07);
    backdrop-filter: blur(26px) saturate(1.12);
    -webkit-backdrop-filter: blur(26px) saturate(1.12);
}

.veloura-navbar::after {
    position: absolute;
    right: 12%;
    bottom: -1px;
    left: 12%;
    height: 1px;
    pointer-events: none;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(185,144,82,.48), transparent);
}

.brand-logo {
    filter: drop-shadow(0 7px 14px rgba(36,35,19,.09));
    transition: transform 260ms var(--lux-ease), filter 260ms ease;
}

.navbar-brand:hover .brand-logo {
    transform: translateY(-1px) scale(1.015);
    filter: drop-shadow(0 10px 18px rgba(36,35,19,.13));
}

.nav-link {
    color: #49472b;
    font-weight: 650;
    letter-spacing: .015em;
}

.nav-link::after {
    background: linear-gradient(90deg, var(--lux-gold), var(--lux-gold-bright));
    box-shadow: 0 1px 7px rgba(185,144,82,.34);
}

.nav-user-button,
.nav-icon-button {
    border-color: rgba(185,144,82,.22);
    background: rgba(255,253,248,.68);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.nav-user-button:hover,
.nav-icon-button:hover {
    border-color: rgba(185,144,82,.42);
    background: rgba(255,253,248,.96);
    box-shadow: 0 12px 26px rgba(36,35,19,.075);
}

.dropdown-menu {
    border: 1px solid rgba(185,144,82,.24);
    border-radius: 18px;
    background: rgba(255,253,248,.98);
    box-shadow: var(--lux-shadow-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.dropdown-item {
    border-radius: 10px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--lux-ink);
    background: linear-gradient(90deg, rgba(234,216,184,.42), rgba(255,253,248,.75));
}

/* Search input shell is refined, but result dropdown stays untouched. */
.global-search-form {
    border-color: rgba(185,144,82,.22);
    background: rgba(255,255,255,.80);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 24px rgba(36,35,19,.04);
}

.global-search:focus-within .global-search-form {
    border-color: rgba(185,144,82,.48);
    box-shadow: 0 0 0 4px rgba(185,144,82,.075), 0 14px 30px rgba(36,35,19,.07);
}

.global-search-submit {
    background: linear-gradient(135deg, #5c5b38, #39391f);
    box-shadow: 0 7px 16px rgba(53,53,31,.18);
}

/* ============================================================
   06. Home / editorial hero
============================================================ */

.hero-section {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(185,144,82,.18);
    background:
        radial-gradient(circle at 80% 28%, rgba(213,178,118,.18), transparent 22rem),
        radial-gradient(circle at 12% 80%, rgba(83,83,53,.09), transparent 25rem),
        linear-gradient(145deg, #faf3e9 0%, #fffdf8 48%, #f3e5d2 100%);
}

.hero-section::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(110deg, transparent 0 58%, rgba(255,255,255,.5) 58.1% 58.3%, transparent 58.4%),
        linear-gradient(90deg, rgba(185,144,82,.06) 1px, transparent 1px);
    background-size: auto, 78px 78px;
    mask-image: linear-gradient(to bottom, #000, transparent 86%);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    max-width: 780px;
    color: #2c2b18;
    font-size: clamp(3.15rem, 6.2vw, 6.65rem);
    line-height: .92;
    letter-spacing: -.055em;
}

.hero-content > p {
    max-width: 660px;
    color: #746f54;
    font-size: clamp(.98rem, 1.25vw, 1.08rem);
    line-height: 1.85;
}

.hero-product-shape {
    border: 1px solid rgba(185,144,82,.34);
    background:
        linear-gradient(145deg, rgba(255,255,255,.58), rgba(234,216,184,.34)),
        rgba(255,253,248,.78);
    box-shadow:
        0 36px 80px rgba(53,53,31,.13),
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 0 0 10px rgba(255,255,255,.22);
}

.hero-orbit-large {
    border-color: rgba(185,144,82,.28);
}

.hero-note {
    border: 1px solid rgba(185,144,82,.25);
    background: rgba(255,253,248,.82);
    box-shadow: var(--lux-shadow-sm);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.home-birthday-wrap {
    padding-top: clamp(20px, 3vw, 34px);
}

.home-birthday-banner {
    border: 1px solid rgba(185,144,82,.30);
    border-radius: 24px;
    background:
        radial-gradient(circle at 8% 30%, rgba(213,178,118,.22), transparent 15rem),
        linear-gradient(110deg, rgba(255,253,248,.96), rgba(244,232,214,.86));
    box-shadow: var(--lux-shadow-sm);
}

.home-birthday-icon {
    color: var(--lux-gold);
    background: rgba(255,255,255,.68);
    box-shadow: inset 0 0 0 1px rgba(185,144,82,.16), 0 10px 24px rgba(36,35,19,.06);
}

.home-search-section {
    padding-block: clamp(46px, 7vw, 88px);
}

.home-search-card {
    position: relative;
    overflow: visible;
    border: 1px solid rgba(185,144,82,.24);
    border-radius: var(--lux-radius-xl);
    background:
        radial-gradient(circle at 12% 12%, rgba(213,178,118,.12), transparent 15rem),
        rgba(255,253,248,.88);
    box-shadow: var(--lux-shadow-md);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.home-search-card::after {
    position: absolute;
    top: -1px;
    right: 12%;
    left: 12%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(213,178,118,.85), transparent);
}

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

.smart-home-section-personalized {
    background: linear-gradient(180deg, rgba(239,226,207,.30), rgba(255,253,248,.10));
}

.product-grid-heading {
    gap: 24px;
    margin-bottom: clamp(24px, 4vw, 40px);
}

.product-grid-heading h2 {
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    letter-spacing: -.04em;
}

/* ============================================================
   07. Product cards
============================================================ */

.product-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(185,144,82,.20);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,253,248,.97), rgba(250,245,237,.98));
    box-shadow: var(--lux-shadow-sm);
    transform: translateZ(0);
    transition:
        transform 300ms var(--lux-ease),
        box-shadow 300ms var(--lux-ease),
        border-color 300ms ease;
}

.product-card::before {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 16%;
    left: 16%;
    height: 1px;
    pointer-events: none;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(213,178,118,.72), transparent);
}

.product-card:hover {
    border-color: rgba(185,144,82,.42);
    box-shadow: var(--lux-shadow-lg);
    transform: translateY(-7px);
}

.product-card-media {
    margin: 8px 8px 0;
    overflow: hidden;
    border: 1px solid rgba(185,144,82,.11);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,.9), transparent 9rem),
        linear-gradient(145deg, #f3e8d8, #fffaf3);
}

.product-card-media::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 42%, rgba(185,144,82,.06));
}

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

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

.product-card-body {
    padding: 20px 19px 19px;
}

.product-card-title {
    font-family: "Playfair Display", serif;
    font-size: 1.14rem;
    font-weight: 600;
    letter-spacing: -.018em;
}

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

.product-card-price,
.product-price {
    color: var(--lux-ink);
    font-weight: 750;
}

.product-wishlist-button {
    border-color: rgba(185,144,82,.23);
    background: rgba(255,253,248,.86);
    box-shadow: 0 8px 20px rgba(36,35,19,.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.product-wishlist-button:hover {
    border-color: rgba(185,144,82,.46);
    background: #fffdf8;
    transform: translateY(-1px) scale(1.04);
}

.product-card-footer {
    border-top-color: rgba(185,144,82,.14);
}

/* ============================================================
   08. Catalog / categories / search page wrapper
============================================================ */

.catalog-hero,
.category-detail-hero,
.search-results-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(185,144,82,.18);
    background:
        radial-gradient(circle at 83% 20%, rgba(213,178,118,.16), transparent 19rem),
        linear-gradient(135deg, rgba(248,240,229,.95), rgba(255,253,248,.98));
}

.catalog-hero::after,
.category-detail-hero::after,
.search-results-hero::after {
    position: absolute;
    right: -5rem;
    bottom: -9rem;
    width: 24rem;
    height: 24rem;
    border: 1px solid rgba(185,144,82,.16);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 36px rgba(185,144,82,.028), 0 0 0 72px rgba(185,144,82,.018);
}

.catalog-filter-panel {
    border-radius: 24px;
    background: rgba(255,253,248,.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.catalog-filter-panel h2,
.catalog-filter-panel h3 {
    letter-spacing: -.02em;
}

.catalog-toggle {
    border-color: rgba(185,144,82,.22);
    background: rgba(255,253,248,.78);
}

.catalog-toggle:hover {
    border-color: rgba(185,144,82,.42);
    box-shadow: var(--lux-shadow-xs);
}

.category-grid {
    gap: clamp(18px, 2.2vw, 30px);
}

.category-card {
    overflow: hidden;
    border: 1px solid rgba(185,144,82,.21);
    border-radius: 26px;
    background: var(--lux-ivory);
    box-shadow: var(--lux-shadow-sm);
    transition: transform 300ms var(--lux-ease), box-shadow 300ms var(--lux-ease), border-color 300ms ease;
}

.category-card:hover {
    border-color: rgba(185,144,82,.44);
    box-shadow: var(--lux-shadow-lg);
    transform: translateY(-7px);
}

.category-card-media {
    background: linear-gradient(145deg, #efe2cf, #fff9ef);
}

.category-card-media::after {
    background: linear-gradient(180deg, transparent 35%, rgba(35,34,17,.26));
}

.category-card-body {
    padding: 22px 22px 24px;
}

.category-card-body h2,
.category-card-body h3 {
    letter-spacing: -.025em;
}

.category-detail-image,
.category-detail-mark {
    border-color: rgba(185,144,82,.28);
    box-shadow: var(--lux-shadow-md);
}

.catalog-cta-card {
    overflow: hidden;
    border: 1px solid rgba(185,144,82,.32);
    background:
        radial-gradient(circle at 10% 50%, rgba(213,178,118,.18), transparent 16rem),
        linear-gradient(120deg, #3c3c23, #555235);
    box-shadow: var(--lux-shadow-lg);
}

.catalog-empty {
    border-color: rgba(185,144,82,.24);
    background: rgba(255,253,248,.84);
    box-shadow: var(--lux-shadow-sm);
}

.catalog-pagination a,
.catalog-pagination span {
    border-color: rgba(185,144,82,.22);
    box-shadow: 0 7px 18px rgba(36,35,19,.04);
}

/* ============================================================
   09. Product detail
============================================================ */

.product-detail-page {
    background:
        radial-gradient(circle at 82% 10%, rgba(213,178,118,.10), transparent 25rem),
        transparent;
}

.product-detail-breadcrumb,
.catalog-breadcrumb,
.checkout-breadcrumb,
.cart-breadcrumb {
    color: #817b5f;
    font-size: .78rem;
    letter-spacing: .025em;
}

.main-image {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(185,144,82,.23);
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 14%, rgba(255,255,255,.92), transparent 12rem),
        linear-gradient(145deg, #f0e4d2, #fffaf3);
    box-shadow: var(--lux-shadow-md);
}

.main-image::after {
    position: absolute;
    inset: 9px;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 22px;
    content: "";
}

.thumbnail-button {
    border-color: rgba(185,144,82,.20);
    border-radius: 15px;
    background: rgba(255,253,248,.8);
    box-shadow: 0 7px 18px rgba(36,35,19,.04);
}

.thumbnail-button:hover,
.thumbnail-button:has(.thumbnail.active) {
    border-color: rgba(185,144,82,.58);
    box-shadow: 0 10px 24px rgba(36,35,19,.08);
}

.product-info {
    position: relative;
    border: 1px solid rgba(185,144,82,.20);
    border-radius: 30px;
    background: rgba(255,253,248,.70);
    box-shadow: var(--lux-shadow-sm);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.product-info::before {
    position: absolute;
    top: 0;
    right: 14%;
    left: 14%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(213,178,118,.76), transparent);
}

.product-info h1 {
    font-size: clamp(2.3rem, 4.2vw, 4.35rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.product-detail-actions {
    border-top-color: rgba(185,144,82,.15);
}

.product-tabs .nav-tabs {
    border-color: rgba(185,144,82,.18);
}

.product-tabs .nav-link {
    color: #746f54;
}

.product-tabs .nav-link.active {
    color: var(--lux-ink);
    border-bottom-color: var(--lux-gold);
}

.product-review-form-card {
    border-color: rgba(185,144,82,.20);
    background: rgba(255,253,248,.84);
    box-shadow: var(--lux-shadow-sm);
}

.mobile-sticky-purchase {
    border-top-color: rgba(185,144,82,.24);
    background: rgba(255,253,248,.94);
    box-shadow: 0 -16px 36px rgba(36,35,19,.09);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ============================================================
   10. Cart / checkout
============================================================ */

.cart-page,
.checkout-page {
    background: linear-gradient(180deg, rgba(248,240,229,.28), transparent 28rem);
}

.cart-header,
.checkout-header {
    margin-bottom: clamp(28px, 4vw, 42px);
}

.cart-count-pill {
    border-color: rgba(185,144,82,.28);
    color: var(--lux-olive-deep);
    background: rgba(234,216,184,.45);
}

.cart-items-panel,
.checkout-section,
.checkout-summary {
    border-radius: 28px;
}

.cart-item,
.checkout-product {
    border-bottom-color: rgba(185,144,82,.14);
}

.cart-item:hover {
    background: linear-gradient(90deg, rgba(234,216,184,.13), transparent);
}

.checkout-product-media {
    border-color: rgba(185,144,82,.18);
    border-radius: 16px;
    background: linear-gradient(145deg, #efe4d5, #fffaf4);
}

.quantity-control {
    border-color: rgba(185,144,82,.25);
    background: rgba(255,253,248,.82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.cart-summary-column,
.checkout-summary {
    position: sticky;
    top: 108px;
}

.checkout-summary {
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(213,178,118,.13), transparent 13rem),
        rgba(255,253,248,.94);
}

.checkout-summary-header,
.checkout-section-header {
    border-bottom-color: rgba(185,144,82,.16);
}

.checkout-step-number,
.checkout-payment-icon,
.coupon-panel-icon {
    color: var(--lux-gold);
    background: rgba(234,216,184,.35);
    box-shadow: inset 0 0 0 1px rgba(185,144,82,.17);
}

.checkout-choice-card,
.checkout-payment-card {
    border-color: rgba(185,144,82,.21);
    border-radius: 20px;
    background: rgba(255,253,248,.76);
    box-shadow: 0 9px 24px rgba(36,35,19,.04);
}

.checkout-choice-card:hover,
.checkout-payment-card:hover {
    border-color: rgba(185,144,82,.46);
    background: #fffdf8;
    box-shadow: var(--lux-shadow-sm);
    transform: translateY(-2px);
}

.checkout-birthday-notice,
.coupon-applied-card,
.checkout-trust-strip,
.cart-security-note {
    border-color: rgba(185,144,82,.24);
    background: linear-gradient(120deg, rgba(234,216,184,.26), rgba(255,253,248,.80));
}

.coupon-panel,
.checkout-coupon-panel {
    border-color: rgba(185,144,82,.19);
    background: rgba(248,240,229,.54);
}

.empty-cart-card,
.checkout-empty-address {
    border-color: rgba(185,144,82,.24);
    background: rgba(255,253,248,.88);
    box-shadow: var(--lux-shadow-sm);
}

/* ============================================================
   11. Accounts / authentication
============================================================ */

.auth-section {
    position: relative;
    min-height: calc(100vh - 180px);
    background:
        radial-gradient(circle at 18% 24%, rgba(213,178,118,.18), transparent 18rem),
        radial-gradient(circle at 83% 72%, rgba(83,83,53,.085), transparent 22rem),
        linear-gradient(135deg, rgba(248,240,229,.64), rgba(255,253,248,.82));
}

.auth-section::before,
.auth-section::after {
    border-color: rgba(185,144,82,.16);
}

.auth-card {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 44px) !important;
    border: 1px solid rgba(185,144,82,.26);
    border-radius: 32px;
    background:
        radial-gradient(circle at 0 0, rgba(213,178,118,.10), transparent 15rem),
        rgba(255,253,248,.92);
    box-shadow: var(--lux-shadow-lg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.auth-card::before {
    position: absolute;
    top: 0;
    right: 14%;
    left: 14%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(213,178,118,.9), transparent);
}

.auth-card h2 {
    font-size: clamp(2rem, 3vw, 2.75rem);
    letter-spacing: -.04em;
}

.auth-security-icon {
    border: 1px solid rgba(185,144,82,.22);
    color: var(--lux-gold);
    background: linear-gradient(145deg, rgba(234,216,184,.42), rgba(255,253,248,.9));
    box-shadow: 0 12px 30px rgba(36,35,19,.07);
}

.account-dashboard-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(185,144,82,.25);
    border-radius: 32px;
    background:
        radial-gradient(circle at 90% 20%, rgba(213,178,118,.20), transparent 18rem),
        linear-gradient(125deg, rgba(255,253,248,.96), rgba(243,231,213,.88));
    box-shadow: var(--lux-shadow-md);
}

.account-dashboard-hero::after {
    position: absolute;
    right: -5rem;
    bottom: -8rem;
    width: 19rem;
    height: 19rem;
    border: 1px solid rgba(185,144,82,.18);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 32px rgba(185,144,82,.025), 0 0 0 64px rgba(185,144,82,.018);
}

.account-feature-card {
    border: 1px solid rgba(185,144,82,.20);
    border-radius: 24px;
    background: rgba(255,253,248,.91);
    box-shadow: var(--lux-shadow-sm);
}

.account-feature-card:hover {
    border-color: rgba(185,144,82,.42);
    box-shadow: var(--lux-shadow-md);
    transform: translateY(-5px);
}

.account-feature-icon,
.dashboard-language-icon,
.birthday-reward-icon,
.security-card-icon {
    color: var(--lux-gold);
    background: linear-gradient(145deg, rgba(234,216,184,.48), rgba(255,253,248,.88));
    box-shadow: inset 0 0 0 1px rgba(185,144,82,.17), 0 10px 24px rgba(36,35,19,.055);
}

.list-group {
    overflow: hidden;
    border: 1px solid rgba(185,144,82,.19);
    border-radius: 24px;
    background: rgba(255,253,248,.88);
    box-shadow: var(--lux-shadow-sm);
}

.list-group-item {
    border-color: rgba(185,144,82,.12);
    color: #5f5b41;
    background: transparent;
}

.list-group-item:hover {
    color: var(--lux-ink);
    background: linear-gradient(90deg, rgba(234,216,184,.26), transparent);
}

.list-group-item.active {
    color: #fffdf8;
    background: linear-gradient(135deg, #5b5a37, #39391f);
    box-shadow: inset 3px 0 0 var(--lux-gold-bright);
}

.profile-avatar-image {
    border: 4px solid rgba(255,253,248,.96);
    outline: 1px solid rgba(185,144,82,.34);
    box-shadow: 0 16px 34px rgba(36,35,19,.12);
}

.verification-badge {
    border-color: rgba(185,144,82,.22);
    box-shadow: 0 7px 18px rgba(36,35,19,.04);
}

.security-grid {
    gap: 22px;
}

.security-card,
.dashboard-language-card,
.dashboard-security-card,
.dashboard-skin-profile-card,
.birthday-reward-card {
    border-radius: 26px;
}

/* ============================================================
   12. Orders
============================================================ */

.order-detail-header-actions .btn {
    box-shadow: 0 8px 22px rgba(36,35,19,.055);
}

.order-item-thumbnail,
.order-item-placeholder {
    border: 1px solid rgba(185,144,82,.18);
    background: linear-gradient(145deg, #efe4d5, #fffaf4);
}

.order-status-chip,
.order-status-badge {
    border: 1px solid rgba(185,144,82,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
}

.shipping-card-icon,
.timeline-icon,
.shipping-info-icon,
.delivery-calendar-icon {
    box-shadow: inset 0 0 0 1px rgba(185,144,82,.16), 0 9px 22px rgba(36,35,19,.05);
}

.delivery-notes-box,
.delivery-time-box,
.shipping-status-box {
    border-color: rgba(185,144,82,.18);
    background: linear-gradient(120deg, rgba(248,240,229,.64), rgba(255,253,248,.84));
}

.order-timeline::before {
    background: linear-gradient(var(--lux-gold-pale), rgba(185,144,82,.14));
}

/* ============================================================
   13. Wishlist / payment return
============================================================ */

.wishlist-header {
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(185,144,82,.16);
}

.wishlist-empty {
    border: 1px solid rgba(185,144,82,.24);
    border-radius: 30px;
    background: rgba(255,253,248,.88);
    box-shadow: var(--lux-shadow-sm);
}

.wishlist-empty-icon {
    color: var(--lux-gold);
    background: rgba(234,216,184,.36);
    box-shadow: inset 0 0 0 1px rgba(185,144,82,.16);
}

.payment-return-page {
    min-height: 66vh;
    background:
        radial-gradient(circle at 50% 18%, rgba(213,178,118,.14), transparent 22rem),
        transparent;
}

.payment-return-card {
    overflow: hidden;
    border-radius: 34px;
    background:
        radial-gradient(circle at 100% 0, rgba(213,178,118,.12), transparent 14rem),
        rgba(255,253,248,.94);
    box-shadow: var(--lux-shadow-lg) !important;
}

.payment-return-icon {
    box-shadow: inset 0 0 0 1px rgba(185,144,82,.18), 0 14px 32px rgba(36,35,19,.08);
}

.payment-return-security {
    border-color: rgba(185,144,82,.19);
    background: rgba(248,240,229,.62);
}

/* ============================================================
   14. Skin analysis — elevated clinical luxury
============================================================ */

.skin-analysis-page,
.skin-questionnaire-page,
.skin-profile-page {
    background:
        radial-gradient(circle at 84% 7%, rgba(213,178,118,.12), transparent 26rem),
        radial-gradient(circle at 12% 50%, rgba(83,83,53,.055), transparent 30rem),
        transparent;
}

.skin-analysis-hero {
    border-bottom: 1px solid rgba(185,144,82,.17);
    background:
        radial-gradient(circle at 72% 42%, rgba(213,178,118,.15), transparent 20rem),
        linear-gradient(135deg, #faf3e9, #fffdf8 54%, #f1e3cf);
}

.skin-analysis-title {
    color: #292817;
    font-size: clamp(3.2rem, 6vw, 6rem);
    letter-spacing: -.055em;
}

.skin-analysis-title span {
    color: var(--lux-gold);
    text-shadow: 0 5px 26px rgba(185,144,82,.16);
}

.skin-analysis-visual-card {
    position: relative;
    border: 1px solid rgba(185,144,82,.30);
    background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,.86), transparent 12rem),
        linear-gradient(145deg, rgba(234,216,184,.42), rgba(255,253,248,.86));
    box-shadow: var(--lux-shadow-lg);
}

.skin-analysis-visual-card::after {
    border-color: rgba(185,144,82,.14);
    box-shadow: 0 0 0 26px rgba(185,144,82,.026), 0 0 0 52px rgba(185,144,82,.016);
}

.skin-analysis-visual-circle {
    border-color: rgba(185,144,82,.28);
    color: var(--lux-olive-deep);
    background: rgba(255,253,248,.70);
    box-shadow: inset 0 0 0 8px rgba(255,255,255,.27), 0 18px 38px rgba(36,35,19,.08);
}

.skin-analysis-floating-card {
    border-color: rgba(185,144,82,.24);
    background: rgba(255,253,248,.91);
    box-shadow: var(--lux-shadow-sm);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.skin-analysis-feature-card {
    overflow: hidden;
    border-radius: 26px;
    transition: transform 280ms var(--lux-ease), box-shadow 280ms var(--lux-ease), border-color 280ms ease;
}

.skin-analysis-feature-card:hover {
    border-color: rgba(185,144,82,.40) !important;
    box-shadow: var(--lux-shadow-md) !important;
    transform: translateY(-6px);
}

.skin-analysis-feature-icon,
.skin-analysis-step-number {
    color: var(--lux-gold);
}

.skin-analysis-final-cta {
    overflow: hidden;
    border: 1px solid rgba(185,144,82,.32);
    background:
        radial-gradient(circle at 10% 50%, rgba(213,178,118,.18), transparent 17rem),
        linear-gradient(120deg, #3a3a22, #555235);
    box-shadow: var(--lux-shadow-lg);
}

.skin-questionnaire-progress-track {
    overflow: hidden;
    border: 1px solid rgba(185,144,82,.17);
    background: rgba(234,216,184,.25);
}

.skin-questionnaire-progress-bar {
    background: linear-gradient(90deg, #8a7448, #d0aa6d, #a7834b);
    box-shadow: 0 0 14px rgba(185,144,82,.20);
}

.skin-question-card {
    border-radius: 30px;
    box-shadow: var(--lux-shadow-md) !important;
}

.skin-question-choice {
    border: 1px solid rgba(185,144,82,.19);
    border-radius: 18px;
    background: rgba(255,253,248,.74);
    box-shadow: 0 8px 20px rgba(36,35,19,.035);
}

.skin-question-choice:hover {
    border-color: rgba(185,144,82,.43);
    background: #fffdf8;
    box-shadow: var(--lux-shadow-sm);
    transform: translateY(-2px);
}

.skin-question-choice:has(input:checked) {
    border-color: rgba(185,144,82,.65);
    background: linear-gradient(120deg, rgba(234,216,184,.36), rgba(255,253,248,.92));
    box-shadow: 0 0 0 3px rgba(185,144,82,.08), var(--lux-shadow-sm);
}

.skin-profile-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(185,144,82,.28);
    border-radius: 34px;
    background:
        radial-gradient(circle at 88% 20%, rgba(213,178,118,.19), transparent 18rem),
        linear-gradient(125deg, rgba(255,253,248,.97), rgba(242,229,209,.88));
    box-shadow: var(--lux-shadow-md);
}

.skin-profile-summary-card,
.skin-profile-concern-card,
.skin-routine-card,
.skin-profile-management {
    border-radius: 26px;
}

.skin-profile-recommendation-card {
    overflow: hidden;
    border: 1px solid rgba(185,144,82,.20);
    border-radius: 25px;
    background: rgba(255,253,248,.94);
    box-shadow: var(--lux-shadow-sm);
}

.skin-profile-recommendation-card:hover {
    border-color: rgba(185,144,82,.43);
    box-shadow: var(--lux-shadow-lg);
    transform: translateY(-6px);
}

.skin-profile-recommendation-media {
    background: linear-gradient(145deg, #efe4d4, #fffaf3);
}

.why-this-product,
.skin-result-disclaimer,
.skin-profile-soft-message {
    border-color: rgba(185,144,82,.19);
    background: linear-gradient(120deg, rgba(248,240,229,.62), rgba(255,253,248,.82));
}

/* ============================================================
   15. Footer — dark editorial finish
============================================================ */

.site-footer {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(213,178,118,.34);
    color: rgba(255,253,248,.82);
    background:
        radial-gradient(circle at 12% 0, rgba(213,178,118,.12), transparent 20rem),
        linear-gradient(135deg, #2f301d 0%, #3c3c24 52%, #292a19 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.site-footer::before {
    background: linear-gradient(90deg, transparent, rgba(213,178,118,.72), transparent);
}

.site-footer::after {
    position: absolute;
    right: -8rem;
    bottom: -13rem;
    width: 28rem;
    height: 28rem;
    border: 1px solid rgba(213,178,118,.09);
    border-radius: 50%;
    pointer-events: none;
    content: "";
    box-shadow: 0 0 0 46px rgba(213,178,118,.018), 0 0 0 92px rgba(213,178,118,.012);
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer strong,
.footer-brand {
    color: #fffaf0;
}

.site-footer p,
.site-footer small,
.site-footer .text-muted {
    color: rgba(255,253,248,.62) !important;
}

.footer-links a {
    color: rgba(255,253,248,.70);
}

.footer-links a:hover {
    color: var(--lux-gold-bright);
}

/* ============================================================
   16. Motion & micro-interactions
============================================================ */

@media (hover: hover) and (pointer: fine) {
    .category-card-link,
    .account-feature-link,
    .home-birthday-action {
        transition: gap 220ms var(--lux-ease), color 220ms ease, transform 220ms var(--lux-ease);
    }

    .category-card-link:hover,
    .account-feature-link:hover,
    .home-birthday-action:hover {
        gap: 10px;
    }
}

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

/* ============================================================
   17. Responsive luxury tuning
============================================================ */

@media (max-width: 1199.98px) {
    .cart-summary-column,
    .checkout-summary {
        top: 92px;
    }

    .hero-content h1 {
        font-size: clamp(3rem, 6vw, 5.3rem);
    }
}

@media (max-width: 991.98px) {
    .veloura-navbar .navbar-collapse {
        margin-top: 10px;
        padding: 17px;
        border: 1px solid rgba(185,144,82,.20);
        border-radius: 22px;
        background: rgba(255,253,248,.97);
        box-shadow: var(--lux-shadow-md);
    }

    .hero-section {
        background:
            radial-gradient(circle at 76% 22%, rgba(213,178,118,.16), transparent 18rem),
            linear-gradient(145deg, #faf3e9, #fffdf8);
    }

    .cart-summary-column,
    .checkout-summary {
        position: static;
    }

    .product-info,
    .main-image {
        border-radius: 25px;
    }
}

@media (max-width: 767.98px) {
    body::after {
        opacity: .18;
    }

    .hero-content h1,
    .skin-analysis-title {
        font-size: clamp(2.65rem, 13vw, 4.35rem);
        line-height: .96;
    }

    .home-search-card,
    .account-dashboard-hero,
    .skin-profile-hero,
    .payment-return-card,
    .auth-card {
        border-radius: 26px;
    }

    .product-card,
    .category-card {
        border-radius: 21px;
    }

    .product-card-media {
        border-radius: 16px;
    }

    .card:not(.product-card),
    .surface-card,
    .catalog-filter-panel,
    .checkout-section,
    .checkout-summary,
    .cart-items-panel,
    .security-card,
    .skin-question-card {
        border-radius: 22px !important;
    }

    .auth-section {
        min-height: auto;
    }
}

@media (max-width: 575.98px) {
    .page-eyebrow,
    .catalog-kicker,
    .checkout-section-kicker,
    .payment-return-kicker,
    .skin-analysis-eyebrow {
        letter-spacing: .13em;
    }

    .btn,
    .catalog-cta-button,
    .skin-analysis-button,
    .skin-analysis-secondary-button,
    .skin-questionnaire-button,
    .place-order-button {
        min-height: 48px;
    }

    .product-card:hover,
    .category-card:hover,
    .account-feature-card:hover,
    .skin-profile-recommendation-card:hover {
        transform: none;
    }
}

/* ============================================================
   18. Promotions / coupon details
============================================================ */

.coupon-input-group {
    border: 1px solid rgba(185,144,82,.24);
    border-radius: 15px;
    background: rgba(255,255,255,.86);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 7px 20px rgba(36,35,19,.035);
}

.coupon-input-group:focus-within {
    border-color: rgba(185,144,82,.58);
    box-shadow: 0 0 0 4px rgba(185,144,82,.09), 0 13px 28px rgba(36,35,19,.055);
}

.coupon-input-group button {
    color: #2a2815;
    background: linear-gradient(135deg, #e4c78f, #bc9151);
    box-shadow: inset 1px 0 0 rgba(255,255,255,.25);
}

.coupon-input-group button:hover {
    filter: brightness(1.025) saturate(1.04);
}

.coupon-code {
    color: var(--lux-olive-deep);
}

.coupon-remove-button {
    border-color: rgba(165,84,74,.20);
    background: rgba(255,253,248,.90);
    box-shadow: 0 6px 16px rgba(36,35,19,.04);
}

.coupon-status-message {
    border: 1px solid transparent;
}

.coupon-status-message.is-valid {
    border-color: rgba(102,113,84,.15);
    background: rgba(102,113,84,.075);
}

.coupon-status-message.is-invalid {
    border-color: rgba(165,84,74,.14);
    background: rgba(165,84,74,.065);
}

.footer-bottom {
    border-top-color: rgba(213,178,118,.16);
    color: rgba(255,253,248,.48);
}