* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

:root {
    --accent: #848484;
    --accent-light: #aeaeae;
    --accent-dark: #2e2e2e;
    --accent-rgb: 132, 132, 132;
}

body {
    font-family: "Poppins", sans-serif;
    background: #f8f8f8;
    color: #131313;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

.navbar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(18, 18, 18, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(170, 170, 170, 0.28);
    box-shadow: 0 4px 24px rgba(9, 9, 9, 0.22);
    transition: border-color 0.5s ease, background 0.6s ease;
}

.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0) 10%,
        rgba(var(--accent-rgb), 0.65) 50%,
        rgba(var(--accent-rgb), 0) 90%,
        transparent 100%);
    transition: background 0.5s ease;
}

.nav-container {
    width: 92%;
    max-width: 1400px;
    height: 82px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #f0f0f0;
    min-width: 190px;
}

.logo-symbol {
    width: 43px;
    height: 43px;
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-family: "Cormorant Garamond", serif;
    font-size: 27px;
    font-weight: 600;
    transform: rotate(45deg);
    transition: border-color 0.5s ease, color 0.5s ease;
}

.logo-symbol::first-letter {
    transform: rotate(-45deg);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-text span {
    font-family: "Cormorant Garamond", serif;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #ebebeb;
    background: none;
    -webkit-text-fill-color: #ebebeb;
    transition: none;
}

.brand-text small {
    margin-top: 5px;
    font-size: 7px;
    letter-spacing: 3px;
    color: #c7c7c7;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav-link,
.dropdown-btn {
    position: relative;
    border: none;
    background: transparent;
    color: #ebebeb;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s ease;
}

.nav-link:hover,
.dropdown-btn:hover {
    color: #ebebeb;
}

.nav-link.active {
    color: #ebebeb;
}

/* Keep primary navigation text cream on hover/focus/active */
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.dropdown-btn:hover,
.dropdown-btn:focus,
.dropdown-btn:active,
.nav-link.active {
    color: #ebebeb !important;
}

.brand-logo:hover,
.brand-logo:focus,
.brand-logo:active {
    color: #f0f0f0 !important;
}

.brand-logo:hover .brand-text span,
.brand-logo:focus .brand-text span,
.brand-logo:active .brand-text span {
    color: #ebebeb !important;
    -webkit-text-fill-color: #ebebeb !important;
}

.dropdown-item.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.4);
}

.dropdown-item.active img {
    filter: grayscale(0%);
    border-color: var(--accent);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 1px;
    background: #ebebeb;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.dropdown {
    position: relative;
}

.dropdown-btn {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dropdown-btn i {
    font-size: 9px;
    transition: 0.3s ease;
}

.dropdown:hover .dropdown-btn i {
    transform: rotate(180deg);
}

/* Collection mega-menu with imagery — compact square cards */
.dropdown-menu {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 306px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 15px 35px rgba(28, 28, 28, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, border-color 0.5s ease;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 6px;
    color: #151515;
    text-decoration: none;
    text-align: center;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 5px;
    background: #ffffff;
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.dropdown-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    filter: grayscale(15%);
    transition: border-color 0.5s ease, transform 0.35s ease, filter 0.35s ease;
}

.dropdown-item span {
    font-size: 10.5px;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.dropdown-item:hover {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: translateY(-3px);
}

.dropdown-item:hover img {
    transform: scale(1.06);
    filter: grayscale(0%);
    border-color: var(--accent);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 17px;
}

.icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0f0f0;
    background: transparent;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s ease;
}

.icon-btn:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

.icon-btn i {
    font-size: 16px;
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #080808;
    font-size: 8px;
    font-weight: 600;
    transition: background-color 0.5s ease;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    height: 40px;
    padding: 0 20px;
    background: var(--accent);
    color: #080808;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background-color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.nav-cta:hover {
    background: var(--accent-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.2);
}

.search-box {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 18px 5%;
    background: rgba(18, 18, 18, 0.98);
    border-top: 1px solid rgba(var(--accent-rgb), 0.12);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: none;
}

.search-box.active {
    display: block;
}

.search-inner {
    max-width: 800px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.5);
    padding: 8px 5px;
    transition: border-color 0.5s ease;
}

.search-inner > i {
    color: var(--accent);
    transition: color 0.5s ease;
}

.search-inner input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #1b1b1b;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
}

.search-inner input::placeholder {
    color: #888888;
}

.close-search {
    border: none;
    background: transparent;
    color: #aaaaaa;
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s ease;
}

.close-search:hover {
    color: var(--accent);
}


.search-results-panel {
    max-width: 800px;
    margin: 0 auto;
    background: #f7f7f7;
    border: 1px solid rgba(160, 160, 160, 0.25);
    border-top: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    display: none;
    max-height: 70vh;
    overflow-y: auto;
}

.search-results-panel.active {
    display: block;
}

.search-result-heading {
    padding: 13px 18px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6b6b6b;
    border-top: 1px solid #dedede;
}

.search-result-heading:first-child {
    border-top: 0;
}

.search-product-item,
.search-collection-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 18px;
    text-decoration: none;
    color: #0e0e0e;
    background: #f7f7f7;
    transition: background-color 0.2s ease;
}

.search-product-item:hover,
.search-collection-item:hover {
    background: #eaeaea;
}

.search-product-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid #dedede;
    background: #ffffff;
}

.search-product-item span,
.search-collection-item span:not(.search-result-icon) {
    min-width: 0;
    flex: 1;
}

.search-product-item strong,
.search-collection-item strong {
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-size: 20px;
    font-weight: 600;
    color: #141414;
}

.search-product-item small,
.search-collection-item small {
    display: block;
    margin-top: 2px;
    color: #6b6b6b;
    font-size: 11px;
}

.search-result-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #bebebe;
    color: #777777;
    flex: 0 0 auto;
}

.search-product-item > i,
.search-collection-item > i {
    color: #777777;
    font-size: 11px;
}

.search-see-all {
    width: 100%;
    border: 0;
    border-top: 1px solid #dedede;
    background: #141414;
    color: #ededed;
    padding: 13px 18px;
    font: 600 11px "Poppins", sans-serif;
    letter-spacing: .7px;
    cursor: pointer;
    text-align: center;
}

.search-see-all:hover {
    background: #1c1c1c;
}

.search-no-result {
    padding: 28px 20px 25px;
    text-align: center;
    color: #272727;
}

.search-no-result > span {
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    border: 1px solid #bebebe;
    color: #777777;
}

.search-no-result strong {
    display: block;
    color: #141414;
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
}

.search-no-result p {
    margin: 5px auto 16px;
    max-width: 520px;
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .search-results-panel {
        max-height: 65vh;
    }

    .search-product-item,
    .search-collection-item {
        padding: 9px 12px;
    }

    .search-product-item strong,
    .search-collection-item strong {
        font-size: 18px;
    }
}

/* Mobile off-canvas slide-in menu */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(23, 23, 23, 0.22);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1099;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 320px;
    max-width: 84vw;
    padding: 0 6% 30px;
    background: #121212;
    border-left: 1px solid rgba(var(--accent-rgb), 0.18);
    box-shadow: -20px 0 45px rgba(28, 28, 28, 0.14);
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s linear 0.45s, border-color 0.5s ease;
    z-index: 1100;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobile-nav.active {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s linear 0s, border-color 0.5s ease;
}

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0 16px;
    color: var(--accent);
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.5s ease;
}

.mobile-nav-close {
    border: none;
    background: transparent;
    color: #aaaaaa;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.mobile-nav-close:hover {
    color: var(--accent);
    transform: rotate(90deg);
}

.mobile-nav > a,
.mobile-collection-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    border: none;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.mobile-nav a:hover,
.mobile-collection-btn:hover {
    color: var(--accent);
}

.mobile-dropdown {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 0 6px;
}

.mobile-dropdown.active {
    display: grid;
}

.mobile-dropdown a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    color: #ffffff;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 5px;
    background: #ffffff;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.mobile-dropdown a:hover {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.08);
}

.mobile-dropdown a img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    flex-shrink: 0;
}

.mobile-cta {
    margin-top: 18px;
    justify-content: center !important;
    background: var(--accent) !important;
    color: #ffffff !important;
    border: none !important;
    transition: background-color 0.4s ease;
}

/* ============================= */
/* HERO SLIDER                    */
/* ============================= */

.hero {
    position: relative;
    height: 78vh;
    min-height: 500px;
    max-height: 820px;
    overflow: hidden;
    background: #050505;
    color: #ffffff;
}

.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1.4s ease;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
    animation: heroKenBurns 6.5s ease-in-out forwards;
}

@keyframes heroKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(180deg, rgba(3, 3, 3, 0.55) 0%, rgba(3, 3, 3, 0.55) 40%, rgba(3, 3, 3, 0.82) 100%),
        radial-gradient(ellipse at center, rgba(3, 3, 3, 0.15) 0%, rgba(3, 3, 3, 0.65) 100%);
}

/* Drifting fragrance-mist particles */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}

.hero-particle {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.9) 0%, rgba(var(--accent-rgb), 0) 70%);
    filter: blur(0.5px);
    animation-name: heroDrift;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

@keyframes heroDrift {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    12%  { opacity: 0.55; }
    88%  { opacity: 0.3; }
    100% { transform: translateY(-38vh) scale(1.6); opacity: 0; }
}

.hero-content {
    position: relative;
    z-index: 5;
    height: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

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

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--accent-light);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
    opacity: 0;
    animation: heroFadeUp 0.9s ease 0.2s forwards;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--accent);
    transition: background-color 0.5s ease;
}

.hero-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: clamp(40px, 6.2vw, 84px);
    line-height: 1.08;
    margin-bottom: 12px;
    opacity: 0;
    animation: heroFadeUp 1s ease 0.4s forwards;
}

.hero-subtitle {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, 2.4vw, 25px);
    color: var(--accent-light);
    letter-spacing: 0.5px;
    margin-bottom: 22px;
    opacity: 0;
    animation: heroFadeUp 1s ease 0.6s forwards;
    transition: color 0.5s ease;
}

.hero-desc {
    font-size: 14.5px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.75);
    max-width: 480px;
    margin: 0 auto 36px;
    opacity: 0;
    animation: heroFadeUp 1s ease 0.8s forwards;
}

.hero-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 36px;
    border: 1px solid var(--accent);
    color: #ffffff;
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    overflow: hidden;
    opacity: 0;
    animation: heroFadeUp 1s ease 1s forwards;
    transition: color 0.4s ease, border-color 0.5s ease;
}

.hero-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.hero-cta:hover::before {
    transform: scaleX(1);
}

.hero-cta:hover {
    color: #080808;
}

.hero-cta i {
    font-size: 11px;
    transition: transform 0.35s ease;
}

.hero-cta:hover i {
    transform: translateX(4px);
}

/* Side arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #131313;
    background: #131313;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 0.35s ease, border-color 0.5s ease, transform 0.3s ease, color 0.3s ease;
}

.hero-arrow:hover {
    background: #0f0f0f;
    border-color: #0f0f0f;
    color: #ffffff;
    transform: translateY(-50%) scale(1.08);
}

.hero-arrow-prev { left: 26px; }
.hero-arrow-next { right: 26px; }

/* Slide index counter */
.hero-index {
    position: absolute;
    right: 30px;
    bottom: 34px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Cormorant Garamond", serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.55);
}

.hero-index-current {
    color: var(--accent-light);
    font-size: 18px;
    transition: color 0.5s ease;
}

.hero-index-divider {
    width: 18px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

/* Dot indicators */
.hero-dots {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background-color 0.35s ease, border-color 0.5s ease, width 0.35s ease, border-radius 0.35s ease;
}

.hero-dot.active {
    width: 26px;
    border-radius: 5px;
    background: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 850px) {
    .hero {
        height: 78vh;
        min-height: 500px;
    }

    .hero-arrow {
        width: 38px;
        height: 38px;
    }

    .hero-arrow-prev { left: 14px; }
    .hero-arrow-next { right: 14px; }

    .hero-index { display: none; }
}


/* ==========================================================
   PRODUCT FAVORITES + NAVIGATION FAVORITES
   ========================================================== */
.product-card { position: relative; }
.product-favorite {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(18,18,18,.16);
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #121212;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 6px 18px rgba(18,18,18,.12);
    transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.product-favorite:hover { transform: scale(1.08); border-color: #121212; }
.product-favorite i { pointer-events: none; font-size: 15px; }
.product-favorite.is-favorite { background: #121212; color: #ffffff; border-color: #121212; }
.favorite-nav-btn { position: relative; }
.favorite-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #121212;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    border: 2px solid #ffffff;
    z-index: 20;
    box-sizing: border-box;
}
.favorite-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    z-index: 100000;
    padding: 12px 18px;
    border-radius: 999px;
    background: #121212;
    color: #ffffff;
    font-size: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    transition: opacity .25s ease, transform .25s ease;
}
.favorite-toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 500px) {
    .hero-content {
        padding: 0 18px;
    }

    .hero-desc {
        font-size: 13.5px;
    }

    .hero-cta {
        padding: 15px 28px;
        letter-spacing: 1.5px;
    }

    .hero-dots {
        bottom: 22px;
    }
}

@media (max-width: 1050px) {
    .nav-menu {
        gap: 20px;
    }

    .brand-logo {
        min-width: auto;
    }

    .brand-text span {
        font-size: 21px;
    }

    .nav-cta {
        min-width: 95px;
        padding: 0 12px;
    }
}

@media (max-width: 850px) {
    .nav-menu {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: #080808;
        color: #ffffff;
        border-radius: 4px;
        border: 1px solid #080808;
    }

    .mobile-menu-btn:hover {
        background: #000000;
        color: #ffffff;
    }

    .nav-container {
        height: 72px;
    }

    .nav-cta {
        display: none;
    }

    .brand-text span {
        font-size: 20px;
    }

    .logo-symbol {
        width: 39px;
        height: 39px;
        font-size: 24px;
    }
}

@media (max-width: 500px) {
    .nav-container {
        width: 90%;
    }

    .brand-text small {
        font-size: 6px;
        letter-spacing: 2px;
    }

    .brand-text span {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .nav-actions {
        gap: 5px;
    }

    .icon-btn {
        width: 34px;
    }

}

/* ===== RESPONSIVE / TOUCH SAFETY ===== */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    touch-action: pan-y;
}

.navbar,
.nav-container,
.nav-actions {
    min-width: 0;
}

@media (max-width: 850px) {
    .nav-container {
        width: min(94%, 1400px);
    }

    .nav-actions {
        flex-shrink: 0;
    }

    .brand-logo {
        flex: 1 1 auto;
        min-width: 0;
    }

    .brand-text {
        min-width: 0;
    }

    .brand-text span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-nav {
        right: 0;
        max-width: min(320px, 84vw);
        will-change: transform;
    }
}

@media (max-width: 420px) {
    .nav-actions { gap: 2px; }
    .brand-logo { gap: 8px; }
    .brand-text span {
        font-size: 17px;
        letter-spacing: 1.5px;
    }
    .icon-btn { width: 32px; }
}


/* MOBILE MENU TEXT — WHITE */
@media (max-width: 850px) {
    .mobile-nav > a,
    .mobile-collection-btn {
        color: #ffffff !important;
    }

    .mobile-nav > a:hover,
    .mobile-collection-btn:hover {
        color: #ffffff !important;
    }

    .mobile-dropdown a,
    .mobile-dropdown a:hover {
        color: #ffffff !important;
    }

    .mobile-nav-header {
        color: #ffffff;
    }
}


/* NAVBAR GOLD HOVER */
.brand-logo:hover,
.brand-logo:hover .brand-text span,
.nav-link:hover,
.dropdown-btn:hover,
.icon-btn:hover,
.nav-cta:hover {
    color: #a0a0a0 !important;
}

.nav-link.active {
    color: #a0a0a0 !important;
}

.dropdown-item:hover {
    color: #a0a0a0 !important;
}

.mobile-nav > a:hover,
.mobile-collection-btn:hover {
    color: #a0a0a0 !important;
}

.mobile-dropdown a:hover {
    color: #a0a0a0 !important;
}

.logo-symbol {
    transition: border-color 0.3s ease, color 0.3s ease;
}

.brand-logo:hover .logo-symbol {
    color: #a0a0a0 !important;
    border-color: #a0a0a0 !important;
}

/* Keep gold underline on navbar hover */
.nav-link::after {
    background: #a0a0a0 !important;
}

/* CURRENT-PAGE INDICATOR (set by script.js on load) */
.dropdown-btn.active,
.mobile-collection-btn.active {
    color: #a0a0a0 !important;
}

.dropdown-item.active {
    color: #a0a0a0 !important;
    background: rgba(var(--accent-rgb), 0.08) !important;
    border-color: rgba(var(--accent-rgb), 0.4) !important;
}

.dropdown-item.active img {
    filter: grayscale(0%);
    border-color: #a0a0a0 !important;
}

.mobile-nav > a.active,
.mobile-dropdown a.active {
    color: #a0a0a0 !important;
}


/* BRAND + SHOP NOW COLORS */
.brand-text span {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #e9e9e9 !important;
    color: #e9e9e9 !important;
}

.brand-logo:hover .brand-text span {
    -webkit-text-fill-color: #a0a0a0 !important;
    color: #a0a0a0 !important;
}

.nav-cta {
    background: #e9e9e9 !important;
    color: #121212 !important;
    border: 1px solid #e9e9e9 !important;
}

.nav-cta:hover {
    background: #e9e9e9 !important;
    color: #121212 !important;
    border-color: #e9e9e9 !important;
}

.mobile-cta {
    background: #e9e9e9 !important;
    color: #121212 !important;
    border-color: #e9e9e9 !important;
}

.mobile-cta:hover {
    background: #e9e9e9 !important;
    color: #121212 !important;
}


/* HERO OVERLAY + LEFT ALIGNED CONTENT */
.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(3, 3, 3, 0.20) 0%,
            rgba(3, 3, 3, 0.08) 45%,
            rgba(3, 3, 3, 0.03) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3, 3, 3, 0.08) 0%,
            rgba(3, 3, 3, 0.10) 100%
        ) !important;
}

.hero-content {
    max-width: 1400px !important;
    width: 92% !important;
    margin: 0 auto !important;
    padding: 0 0 0 7% !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
}

.hero-desc {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.hero-eyebrow {
    align-items: center;
}

@media (max-width: 850px) {
    .hero-content {
        width: 90% !important;
        padding: 0 6% !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .hero-desc {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 500px) {
    .hero-content {
        width: 100% !important;
        padding: 0 18px !important;
    }
}


/* HERO — NO ZOOM + NATURAL LEFT-SIDE TEXT */
.hero-slide,
.hero-slide.active {
    transform: none !important;
    animation: none !important;
    background-size: cover;
    background-position: center center;
}

/* Very subtle left-side readability, keeping the photo natural */
.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(4, 4, 4, 0.28) 0%,
            rgba(4, 4, 4, 0.12) 34%,
            rgba(4, 4, 4, 0.02) 62%,
            rgba(4, 4, 4, 0) 100%
        ) !important;
}

/* Text sits naturally within the left composition of the image */
.hero-content {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 8% !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
}

.hero-eyebrow,
.hero-title,
.hero-subtitle,
.hero-desc,
.hero-cta {
    align-self: flex-start;
}

.hero-title {
    max-width: 560px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

.hero-subtitle {
    max-width: 520px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.16);
}

.hero-desc {
    max-width: 500px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
}

@media (max-width: 850px) {
    .hero-slide,
    .hero-slide.active {
        background-position: center center;
    }

    .hero-content {
        width: 100% !important;
        padding: 0 7% !important;
    }

    .hero-title {
        max-width: 78%;
    }

    .hero-desc {
        max-width: 72% !important;
    }
}

@media (max-width: 500px) {
    .hero-slide,
    .hero-slide.active {
        background-position: center center;
    }

    .hero-content {
        padding: 0 20px !important;
    }

    .hero-title,
    .hero-subtitle,
    .hero-desc {
        max-width: 88% !important;
    }

    .hero-desc {
        font-size: 13px;
        line-height: 1.7;
    }
}


/* FINAL HERO TEXT POSITION + MAROON ACCENTS */
.hero-content {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 8% 0 5% !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
}

.hero-eyebrow {
    color: #121212 !important;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.28);
}

.hero-eyebrow::before,
.hero-eyebrow::after {
    background: #121212 !important;
}

.hero-subtitle {
    color: #121212 !important;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.25);
}

.hero-desc {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.hero-cta {
    background: #121212 !important;
    border-color: #121212 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(18, 18, 18, 0.18);
}

.hero-cta::before {
    background: #121212 !important;
}

.hero-cta:hover {
    color: #ffffff !important;
    border-color: #121212 !important;
    background: #121212 !important;
}

.hero-cta i {
    color: #ffffff !important;
}

@media (max-width: 850px) {
    .hero-content {
        padding: 0 7% 0 5% !important;
    }
}

@media (max-width: 500px) {
    .hero-content {
        padding: 0 18px !important;
    }
}


/* EXPLORE COLLECTION — LUXURY BUTTON ANIMATION */
.hero-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform: translateZ(0);
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease !important;
}

.hero-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: #121212 !important;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-cta::after {
    content: "";
    position: absolute;
    top: -80%;
    left: -55%;
    width: 42%;
    height: 260%;
    z-index: -1;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.42),
        transparent
    );
    transform: translateX(-180%) rotate(18deg);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.hero-cta:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 28px rgba(18, 18, 18, 0.25),
        0 0 0 1px rgba(18, 18, 18, 0.15);
}

.hero-cta:hover::after {
    transform: translateX(520%) rotate(18deg);
}

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

.hero-cta i {
    position: relative;
    z-index: 2;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-cta:hover i {
    transform: translateX(6px);
}

.hero-cta:active {
    transform: translateY(-1px) scale(0.98);
}

/* Gentle breathing effect when the user is not hovering */
@keyframes luxuryButtonBreath {
    0%, 100% {
        box-shadow: 0 7px 20px rgba(18, 18, 18, 0.12);
    }
    50% {
        box-shadow: 0 10px 25px rgba(18, 18, 18, 0.20);
    }
}

.hero-cta {
    animation: luxuryButtonBreath 3.5s ease-in-out infinite;
}

.hero-cta:hover {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-cta,
    .hero-cta::before,
    .hero-cta::after,
    .hero-cta i {
        animation: none !important;
        transition: none !important;
    }
}


/* HERO CTA VISIBILITY FIX */
.hero-cta {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: #121212 !important;
    border: 1px solid #121212 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transform: translateY(0);
}

.hero-cta::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: #121212 !important;
    transform: none !important;
    opacity: 1 !important;
}

.hero-cta::after {
    z-index: 0 !important;
    pointer-events: none !important;
}

.hero-cta span,
.hero-cta i {
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
}

.hero-cta:hover {
    color: #ffffff !important;
    background: #121212 !important;
    border-color: #121212 !important;
    transform: translateY(-3px) !important;
}

.hero-cta:hover span,
.hero-cta:hover i {
    color: #ffffff !important;
}

/* Keep the entrance animation, but never let it leave the button invisible. */
@keyframes heroCtaVisible {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-cta {
    animation:
        heroCtaVisible 0.9s ease 1s both,
        luxuryButtonBreath 3.5s ease-in-out 1.9s infinite !important;
}

.hero-cta:hover {
    animation: none !important;
}

@media (max-width: 850px) {
    .hero-cta {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* EXPLORE COLLECTION — BLINK FIX */
.hero-cta {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease !important;
}

.hero-cta::before,
.hero-cta::after {
    animation: none !important;
}

.hero-cta:hover {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-3px) !important;
    background: #121212 !important;
    border-color: #121212 !important;
    box-shadow: 0 10px 24px rgba(18, 18, 18, 0.22) !important;
}

.hero-cta span,
.hero-cta i {
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.3s ease !important;
}

.hero-cta:hover i {
    transform: translateX(5px) !important;
}


/* DESKTOP/MOBILE MENU VISIBILITY FIX */
/* Mobile menu must never appear on desktop. */
@media (min-width: 851px) {
    .mobile-menu-btn,
    .mobile-nav,
    .mobile-nav-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(100%) !important;
    }
}

/* Mobile: show only the hamburger button; menu opens only after click. */
@media (max-width: 850px) {
    .mobile-menu-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-nav {
        display: block !important;
        visibility: visible !important;
    }

    .mobile-nav:not(.active) {
        opacity: 1 !important;
        pointer-events: none !important;
        transform: translateX(100%) !important;
    }

    .mobile-nav.active {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }

    .mobile-nav-overlay {
        display: block !important;
    }
}

/* FINAL RESPONSIVE HERO — FIT ALL MOBILE DEVICES */
.hero {
    height: min(100svh, 980px);
    min-height: 620px;
}

.hero-content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1500px !important;
    padding-left: clamp(22px, 5vw, 80px) !important;
    padding-right: clamp(22px, 5vw, 80px) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.hero-title {
    font-size: clamp(42px, 5.8vw, 84px) !important;
    line-height: 1.04 !important;
    max-width: min(560px, 48vw) !important;
    overflow-wrap: break-word;
}

.hero-subtitle {
    font-size: clamp(19px, 2.2vw, 25px) !important;
    line-height: 1.25 !important;
    max-width: min(520px, 48vw) !important;
}

.hero-desc {
    font-size: clamp(13px, 1.25vw, 14.5px) !important;
    line-height: 1.7 !important;
    max-width: min(500px, 46vw) !important;
}

.hero-slide,
.hero-slide.active {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    animation: none !important;
}

@media (max-width: 850px) {
    .hero {
        height: 100svh !important;
        min-height: 560px !important;
        max-height: none !important;
    }

    .hero-slide,
    .hero-slide.active {
        background-size: cover !important;
        background-position: center center !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: none !important;
        padding-left: clamp(20px, 6vw, 48px) !important;
        padding-right: clamp(20px, 6vw, 48px) !important;
        justify-content: center !important;
    }

    .hero-eyebrow {
        max-width: 100% !important;
        font-size: clamp(9px, 2.4vw, 11.5px) !important;
        letter-spacing: clamp(2px, 0.8vw, 4px) !important;
        gap: clamp(7px, 2vw, 12px) !important;
        margin-bottom: clamp(14px, 3vw, 20px) !important;
    }

    .hero-eyebrow::before,
    .hero-eyebrow::after {
        width: clamp(16px, 5vw, 28px) !important;
    }

    .hero-title {
        width: 100% !important;
        max-width: min(620px, 86vw) !important;
        font-size: clamp(38px, 8.5vw, 68px) !important;
        line-height: 1.03 !important;
        margin-bottom: 10px !important;
    }

    .hero-subtitle {
        width: 100% !important;
        max-width: min(560px, 86vw) !important;
        font-size: clamp(18px, 4.5vw, 25px) !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }

    .hero-desc {
        width: 100% !important;
        max-width: min(520px, 82vw) !important;
        font-size: clamp(12.5px, 3.2vw, 14px) !important;
        line-height: 1.65 !important;
        margin-bottom: clamp(24px, 5vw, 36px) !important;
    }

    .hero-cta {
        padding: clamp(13px, 3.5vw, 17px) clamp(22px, 6vw, 36px) !important;
        font-size: clamp(10px, 2.7vw, 11.5px) !important;
        letter-spacing: clamp(1px, 0.45vw, 2px) !important;
        gap: 9px !important;
        white-space: nowrap !important;
    }

    .hero-arrow {
        width: clamp(34px, 10vw, 40px) !important;
        height: clamp(34px, 10vw, 40px) !important;
    }

    .hero-arrow-prev { left: max(10px, env(safe-area-inset-left, 0px)) !important; }
    .hero-arrow-next { right: max(10px, env(safe-area-inset-right, 0px)) !important; }

    .hero-dots {
        bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
        gap: 8px !important;
    }
}

/* Small phones */
@media (max-width: 500px) {
    .hero {
        height: 100svh !important;
        min-height: 520px !important;
    }

    .hero-content {
        padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(18px, env(safe-area-inset-right, 0px)) !important;
    }

    .hero-title {
        max-width: 92vw !important;
        font-size: clamp(34px, 10.5vw, 48px) !important;
        line-height: 1.04 !important;
    }

    .hero-subtitle {
        max-width: 92vw !important;
        font-size: clamp(17px, 5.2vw, 22px) !important;
    }

    .hero-desc {
        max-width: 90vw !important;
        font-size: clamp(12px, 3.5vw, 13.5px) !important;
        line-height: 1.6 !important;
    }

    .hero-cta {
        max-width: 90vw !important;
        padding: 13px 21px !important;
    }

    .hero-eyebrow {
        font-size: 9px !important;
        letter-spacing: 2px !important;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .hero {
        min-height: 500px !important;
    }

    .hero-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .hero-eyebrow {
        font-size: 8.5px !important;
        gap: 6px !important;
    }

    .hero-eyebrow::before,
    .hero-eyebrow::after {
        width: 14px !important;
    }

    .hero-title {
        font-size: clamp(31px, 10.8vw, 40px) !important;
    }

    .hero-subtitle {
        font-size: clamp(16px, 5.5vw, 20px) !important;
    }

    .hero-desc {
        font-size: 11.5px !important;
        margin-bottom: 20px !important;
    }

    .hero-cta {
        padding: 12px 18px !important;
        font-size: 9.5px !important;
    }
}

/* Mobile landscape: keep text and controls inside the shorter viewport */
@media (max-width: 850px) and (orientation: landscape) {
    .hero {
        height: 100svh !important;
        min-height: 420px !important;
    }

    .hero-content {
        justify-content: center !important;
        padding-left: 10vw !important;
        padding-right: 10vw !important;
    }

    .hero-eyebrow {
        margin-bottom: 8px !important;
    }

    .hero-title {
        max-width: 62vw !important;
        font-size: clamp(28px, 7vw, 46px) !important;
        margin-bottom: 6px !important;
    }

    .hero-subtitle {
        max-width: 62vw !important;
        font-size: clamp(15px, 3.5vw, 21px) !important;
        margin-bottom: 8px !important;
    }

    .hero-desc {
        max-width: 58vw !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
        margin-bottom: 14px !important;
    }

    .hero-cta {
        padding: 10px 18px !important;
    }

    .hero-dots {
        bottom: 10px !important;
    }
}

/* Respect notched-device safe areas */
@supports (padding: max(0px)) {
    .hero-content {
        padding-left: max(clamp(20px, 6vw, 48px), env(safe-area-inset-left)) !important;
        padding-right: max(clamp(20px, 6vw, 48px), env(safe-area-inset-right)) !important;
    }
}


/* FINAL MOBILE HERO LAYOUT FIX — portrait & landscape phones */
@media (max-width: 850px) {
    .hero {
        height: calc(100svh - 68px) !important;
        min-height: 560px !important;
        max-height: none !important;
        margin: 0 !important;
    }

    .hero-slide,
    .hero-slide.active {
        background-size: cover !important;
        background-position: 58% center !important;
    }

    /* Keep the text in a controlled column so it never collides with the viewport edges. */
    .hero-content {
        position: relative !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 680px !important;
        margin: 0 auto !important;
        padding: 0 max(20px, env(safe-area-inset-left)) max(92px, env(safe-area-inset-bottom) + 72px) max(20px, env(safe-area-inset-right)) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        text-align: left !important;
    }

    /* Extra readability over busy perfume photography. */
    .hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(6, 6, 6, 0.48) 0%,
            rgba(6, 6, 6, 0.25) 42%,
            rgba(6, 6, 6, 0.05) 78%,
            rgba(6, 6, 6, 0.02) 100%
        ) !important;
    }

    .hero-eyebrow,
    .hero-title,
    .hero-subtitle,
    .hero-desc,
    .hero-cta {
        align-self: flex-start !important;
        box-sizing: border-box !important;
    }

    .hero-eyebrow {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(8px, 2.4vw, 11px) !important;
        line-height: 1.2 !important;
        letter-spacing: clamp(1.8px, 0.8vw, 3.5px) !important;
        margin-bottom: clamp(10px, 2.5vw, 16px) !important;
    }

    .hero-eyebrow::before,
    .hero-eyebrow::after {
        flex: 0 0 clamp(14px, 5vw, 26px) !important;
        width: clamp(14px, 5vw, 26px) !important;
    }

    .hero-title {
        width: 100% !important;
        max-width: 560px !important;
        font-size: clamp(34px, 9.4vw, 54px) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.4px !important;
        margin: 0 0 clamp(8px, 2vw, 13px) !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-wrap: balance !important;
    }

    .hero-subtitle {
        width: 100% !important;
        max-width: 520px !important;
        font-size: clamp(17px, 4.7vw, 23px) !important;
        line-height: 1.12 !important;
        margin: 0 0 clamp(10px, 2.5vw, 16px) !important;
        white-space: normal !important;
    }

    .hero-desc {
        width: 100% !important;
        max-width: 500px !important;
        font-size: clamp(12px, 3.25vw, 14px) !important;
        line-height: 1.5 !important;
        margin: 0 0 clamp(18px, 4vw, 28px) !important;
    }

    .hero-cta {
        width: auto !important;
        max-width: 100% !important;
        min-height: 48px !important;
        padding: clamp(12px, 3vw, 15px) clamp(20px, 5vw, 30px) !important;
        font-size: clamp(9px, 2.5vw, 11px) !important;
        line-height: 1 !important;
        letter-spacing: clamp(1px, 0.45vw, 1.7px) !important;
        white-space: nowrap !important;
    }

    .hero-arrow {
        width: 38px !important;
        height: 38px !important;
        top: 52% !important;
    }

    .hero-arrow-prev { left: max(8px, env(safe-area-inset-left)) !important; }
    .hero-arrow-next { right: max(8px, env(safe-area-inset-right)) !important; }

    .hero-dots {
        bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }
}

/* Small portrait phones */
@media (max-width: 500px) and (orientation: portrait) {
    .hero {
        height: calc(100svh - 68px) !important;
        min-height: 500px !important;
    }

    .hero-slide,
    .hero-slide.active {
        background-position: 57% center !important;
    }

    .hero-content {
        padding-left: max(18px, env(safe-area-inset-left)) !important;
        padding-right: max(18px, env(safe-area-inset-right)) !important;
        padding-bottom: max(82px, env(safe-area-inset-bottom) + 66px) !important;
    }

    .hero-title {
        font-size: clamp(31px, 9.6vw, 46px) !important;
        line-height: 1 !important;
        max-width: 94vw !important;
    }

    .hero-subtitle {
        font-size: clamp(16px, 5vw, 21px) !important;
        max-width: 94vw !important;
    }

    .hero-desc {
        font-size: clamp(11.5px, 3.35vw, 13.5px) !important;
        line-height: 1.48 !important;
        max-width: 92vw !important;
        margin-bottom: 20px !important;
    }

    .hero-cta {
        min-height: 46px !important;
        padding: 12px 20px !important;
        font-size: 9.5px !important;
    }
}

/* Very small portrait phones */
@media (max-width: 380px) and (orientation: portrait) {
    .hero {
        min-height: 470px !important;
    }

    .hero-content {
        padding-left: max(15px, env(safe-area-inset-left)) !important;
        padding-right: max(15px, env(safe-area-inset-right)) !important;
        padding-bottom: max(72px, env(safe-area-inset-bottom) + 58px) !important;
    }

    .hero-eyebrow {
        font-size: 8px !important;
        letter-spacing: 1.6px !important;
        margin-bottom: 9px !important;
    }

    .hero-title {
        font-size: clamp(29px, 9.5vw, 38px) !important;
        line-height: 0.98 !important;
    }

    .hero-subtitle {
        font-size: 16px !important;
        margin-bottom: 9px !important;
    }

    .hero-desc {
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin-bottom: 16px !important;
    }

    .hero-cta {
        min-height: 43px !important;
        padding: 11px 16px !important;
        font-size: 8.8px !important;
    }
}

/* Mobile landscape */
@media (max-width: 850px) and (orientation: landscape) {
    .hero {
        height: calc(100svh - 68px) !important;
        min-height: 390px !important;
    }

    .hero-slide,
    .hero-slide.active {
        background-position: center center !important;
    }

    .hero-content {
        padding: 0 9vw max(46px, env(safe-area-inset-bottom) + 30px) !important;
        justify-content: center !important;
    }

    .hero-title {
        max-width: 62vw !important;
        font-size: clamp(27px, 6.5vw, 44px) !important;
    }

    .hero-subtitle {
        max-width: 60vw !important;
        font-size: clamp(14px, 3.4vw, 20px) !important;
    }

    .hero-desc {
        max-width: 56vw !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }

    .hero-cta {
        min-height: 40px !important;
        padding: 9px 17px !important;
    }
}

/* ==========================================================
   MOBILE HERO — TRUE SPLIT LAYOUT
   Text stays on the left; perfume photography stays on the right.
   This prevents text from sitting over bottles on narrow screens.
   ========================================================== */
@media (max-width: 850px) and (orientation: portrait) {
    .hero {
        height: calc(100svh - 68px) !important;
        min-height: 540px !important;
        max-height: 760px !important;
        background: #efefef !important;
    }

    .hero-slides {
        background: #efefef !important;
    }

    .hero-slide,
    .hero-slide.active {
        inset: 0 !important;
        background-size: auto 100% !important;
        background-position: 100% center !important;
        background-repeat: no-repeat !important;
        background-color: #efefef !important;
        transition: opacity 0.8s ease !important;
    }

    /* Soft, clean left panel. The photo remains visible on the right. */
    .hero-overlay {
        background: linear-gradient(
            90deg,
            #efefef 0%,
            #efefef 43%,
            rgba(239, 239, 239, 0.92) 48%,
            rgba(239, 239, 239, 0.28) 57%,
            rgba(239, 239, 239, 0) 68%,
            rgba(239, 239, 239, 0) 100%
        ) !important;
    }

    .hero-content {
        position: relative !important;
        z-index: 5 !important;
        width: 48% !important;
        max-width: 48% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 0 0 max(16px, env(safe-area-inset-left)) !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .hero-eyebrow,
    .hero-title,
    .hero-subtitle,
    .hero-desc,
    .hero-cta {
        align-self: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .hero-eyebrow {
        display: flex !important;
        font-size: clamp(6.5px, 1.8vw, 9px) !important;
        letter-spacing: clamp(1px, 0.45vw, 2.2px) !important;
        line-height: 1.2 !important;
        gap: 5px !important;
        margin: 0 0 clamp(9px, 2vw, 14px) !important;
        color: #1b1b1b !important;
        white-space: nowrap !important;
    }

    .hero-eyebrow::before,
    .hero-eyebrow::after {
        flex: 0 0 clamp(8px, 2.5vw, 18px) !important;
        width: clamp(8px, 2.5vw, 18px) !important;
        background: #1b1b1b !important;
    }

    .hero-title {
        font-size: clamp(29px, 8.7vw, 46px) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.5px !important;
        color: #121212 !important;
        margin: 0 0 clamp(7px, 1.8vw, 12px) !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-wrap: balance !important;
    }

    .hero-subtitle {
        font-size: clamp(15px, 4.5vw, 21px) !important;
        line-height: 1.05 !important;
        color: #1b1b1b !important;
        margin: 0 0 clamp(10px, 2.3vw, 15px) !important;
    }

    .hero-desc {
        font-size: clamp(10px, 2.75vw, 12.5px) !important;
        line-height: 1.45 !important;
        color: #222222 !important;
        margin: 0 0 clamp(15px, 3vw, 22px) !important;
    }

    .hero-cta {
        display: inline-flex !important;
        width: fit-content !important;
        min-height: 42px !important;
        padding: 11px 14px !important;
        font-size: clamp(8px, 2.1vw, 10px) !important;
        letter-spacing: clamp(0.8px, 0.35vw, 1.4px) !important;
        gap: 7px !important;
        background: #121212 !important;
        color: #ffffff !important;
        border-color: #121212 !important;
        white-space: nowrap !important;
    }

    .hero-arrow {
        width: 36px !important;
        height: 36px !important;
        top: 50% !important;
        background: rgba(18, 18, 18, 0.62) !important;
        border-color: rgba(255,255,255,.25) !important;
    }

    .hero-arrow-prev {
        left: max(7px, env(safe-area-inset-left)) !important;
    }

    .hero-arrow-next {
        right: max(7px, env(safe-area-inset-right)) !important;
    }

    .hero-dots {
        left: 24% !important;
        transform: translateX(-50%) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
}

/* Extra narrow phones: give the text panel a little more width. */
@media (max-width: 380px) and (orientation: portrait) {
    .hero-content {
        width: 51% !important;
        max-width: 51% !important;
        padding-left: max(13px, env(safe-area-inset-left)) !important;
    }

    .hero-slide,
    .hero-slide.active {
        background-position: 100% center !important;
    }

    .hero-title {
        font-size: clamp(27px, 8.8vw, 37px) !important;
    }

    .hero-subtitle {
        font-size: clamp(14px, 4.3vw, 18px) !important;
    }

    .hero-desc {
        font-size: 9.8px !important;
        line-height: 1.4 !important;
    }

    .hero-cta {
        min-height: 40px !important;
        padding: 10px 11px !important;
        font-size: 7.8px !important;
    }
}

/* Mobile landscape: retain the same left-text/right-image relationship. */
@media (max-width: 850px) and (orientation: landscape) {
    .hero {
        height: calc(100svh - 68px) !important;
        min-height: 360px !important;
        max-height: 620px !important;
        background: #efefef !important;
    }

    .hero-slide,
    .hero-slide.active {
        background-size: auto 100% !important;
        background-position: 100% center !important;
    }

    .hero-overlay {
        background: linear-gradient(
            90deg,
            #efefef 0%,
            #efefef 38%,
            rgba(239,239,239,.82) 45%,
            rgba(239,239,239,0) 64%,
            rgba(239,239,239,0) 100%
        ) !important;
    }

    .hero-content {
        width: 43% !important;
        max-width: 43% !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        justify-content: center !important;
    }

    .hero-title {
        font-size: clamp(25px, 5.5vw, 40px) !important;
    }

    .hero-subtitle {
        font-size: clamp(13px, 3vw, 19px) !important;
    }

    .hero-desc {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    .hero-cta {
        min-height: 38px !important;
        padding: 9px 13px !important;
        font-size: 8px !important;
    }
}

/* FINAL MOBILE HERO IMAGE FIX — keep the perfume artwork visible on the right */
@media (max-width: 850px) and (orientation: portrait) {
    .hero-slide,
    .hero-slide.active {
        background-size: auto 100% !important;
        background-position: 57% center !important;
        background-repeat: no-repeat !important;
        background-color: #efefef !important;
    }

    .hero-overlay {
        background: linear-gradient(
            90deg,
            #efefef 0%,
            #efefef 38%,
            rgba(239,239,239,.96) 46%,
            rgba(239,239,239,.55) 56%,
            rgba(239,239,239,.10) 68%,
            rgba(239,239,239,0) 78%,
            rgba(239,239,239,0) 100%
        ) !important;
    }
}

@media (max-width: 380px) and (orientation: portrait) {
    .hero-slide,
    .hero-slide.active {
        background-position: 57% center !important;
    }
}

/* ==========================================================
   MOBILE HERO BANNER SIZE — 800 x 1200 (2:3)
   The mobile portrait hero keeps a fixed 800:1200 aspect ratio
   so the banner scales proportionally on every phone width.
   ========================================================== */
@media (max-width: 850px) and (orientation: portrait) {
    .hero {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 800 / 1200 !important;
        overflow: hidden !important;
    }

    .hero-slides,
    .hero-slide,
    .hero-slide.active,
    .hero-overlay,
    .hero-content {
        height: 100% !important;
        min-height: 0 !important;
    }

    .hero-slide,
    .hero-slide.active {
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* Keep the same 800 x 1200 proportion on extra-small portrait phones. */
@media (max-width: 380px) and (orientation: portrait) {
    .hero {
        aspect-ratio: 800 / 1200 !important;
    }
}

/* ==========================================================
   MOBILE SLIDES 2 & 3 — IMAGE POSITION FIX
   Keep the main product fully inside the 800 x 1200 portrait
   banner instead of cropping it out on narrow phones.
   ========================================================== */
@media (max-width: 850px) and (orientation: portrait) {
    .hero-slides .hero-slide:nth-child(2),
    .hero-slides .hero-slide:nth-child(2).active {
        background-size: auto 100% !important;
        background-position: 65% center !important;
        background-repeat: no-repeat !important;
        background-color: #efefef !important;
    }

    .hero-slides .hero-slide:nth-child(3),
    .hero-slides .hero-slide:nth-child(3).active {
        background-size: auto 100% !important;
        background-position: 76% center !important;
        background-repeat: no-repeat !important;
        background-color: #efefef !important;
    }
}

@media (max-width: 380px) and (orientation: portrait) {
    .hero-slides .hero-slide:nth-child(2),
    .hero-slides .hero-slide:nth-child(2).active {
        background-position: 65% center !important;
    }

    .hero-slides .hero-slide:nth-child(3),
    .hero-slides .hero-slide:nth-child(3).active {
        background-position: 76% center !important;
    }
}

/* ==========================================================
   SHOP BY COLLECTION — homepage cards
   ========================================================== */
.collections-section {
    padding: 100px 0 110px;
    background: #050505 url("collection-bg-dark.jpg") center center / cover no-repeat;
    position: relative;
}

.section-container {
    width: 92%;
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: black;
    margin-bottom: 16px;
}

.section-eyebrow::before,
.section-eyebrow::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--accent);
}

.section-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: clamp(32px, 4.2vw, 48px);
    color: #000;
    margin-bottom: 14px;
}

.section-subtitle {
    font-size: 14px;
    color: black;
    max-width: 520px;
    margin: 0 auto 54px;
    line-height: 1.7;
}

.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 30px;
}


.collection-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 8px;
    padding: 34px 18px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.collection-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 42px rgba(18, 18, 18, 0.12);
    border-color: #000;
}

.collection-card-img {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid lightgray;
    margin-bottom: 18px;
    flex-shrink: 0;
}

.collection-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.collection-card:hover .collection-card-img img {
    transform: scale(1.08);
}

.collection-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #000;
    margin-bottom: 8px;
}

.collection-tagline {
    font-size: 10.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: black;
    margin-bottom: 20px;
}

.collection-explore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    color: black;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.collection-explore i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.collection-explore:hover {
    color: #000;
    border-color: #000;
}

.collection-explore:hover i {
    transform: translateX(4px);
}

@media (max-width: 500px) {
    .collections-section {
        padding: 70px 0 80px;
    }

    .collections-grid {
        gap: 20px;
    }

    .collection-card {
        padding: 26px 14px 22px;
    }
}

/* ==========================================================
   COLLECTION PAGE — banner + product grid
   ========================================================== */
.collection-hero {
    position: relative;
    height: 44vh;
    min-height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}

.collection-hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.collection-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 6, 6, 0.5) 0%, rgba(6, 6, 6, 0.82) 100%);
}

.collection-hero-content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.collection-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 14px;
}

.collection-hero-eyebrow::before,
.collection-hero-eyebrow::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--accent);
}

.collection-hero-content h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(34px, 5.5vw, 56px);
    font-weight: 600;
    margin-bottom: 10px;
}

.collection-hero-content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.7;
}

.collection-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 11px;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.3s ease;
}

.collection-back:hover {
    color: var(--accent-light);
}

.collection-products {
    padding: 80px 0 100px;
    background: #f8f8f8;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
    margin-top: 10px;
}

.product-card {
    background: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(18, 18, 18, 0.12);
}

.product-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #efefef;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-card-image img {
    transform: scale(1.06);
}

.product-card-body {
    padding: 22px 20px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}

.product-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 19px;
    font-weight: 600;
    color: #131313;
    margin-bottom: 6px;
}

.product-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-name a:hover {
    color: #131313;
}

.product-notes {
    font-size: 11.5px;
    color: #000000;
    line-height: 1.65;
    margin-bottom: 14px;
}

.product-price {
    font-size: 15px;
    font-weight: 600;
    color: #131313;
    margin-bottom: 18px;
}

.product-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.btn-quick-view,
.btn-add-cart {
    flex: 1;
    padding: 11px 8px;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-quick-view {
    background: #f8f8f8;
    border: 1px solid #000000;
    color: #131313;
}

.btn-quick-view:hover {
    background: #131313;
    border-color: #000000;
    color: #ffffff;
}

.btn-add-cart {
    background: #131313;
    border: 1px solid #131313;
    color: #ffffff;
}

.btn-add-cart:hover {
    background: #f8f8f8;
    border-color: #131313;
    color: #131313;
}

/* ==========================================================
   PRODUCT DETAILS MODAL (shared across collection pages)
   ========================================================== */
.product-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 6, 6, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    z-index: 2000;
}

.product-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.product-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    width: 90%;
    max-width: 640px;
    max-height: 86vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
    z-index: 2001;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}

.product-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

.product-modal-image {
    width: 100%;
    height: 100%;
    min-height: 220px;
    background: #efefef;
}

.product-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-modal-body {
    position: relative;
    padding: 34px 26px 30px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.product-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #7f7f7f;
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
    transition: color 0.3s ease;
}

.product-modal-close:hover {
    color: var(--accent);
}

.product-modal-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 26px;
    font-weight: 600;
    color: #131313;
    margin-bottom: 10px;
}

.product-modal-notes {
    font-size: 12.5px;
    color: #000000;
    line-height: 1.85;
    margin-bottom: 18px;
}

.product-modal-price {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 22px;
}

.product-modal-add {
    padding: 13px 20px;
    background: #131313;
    border: 1px solid #131313;
    color: #f8f8f8;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    align-self: flex-start;
}

.product-modal-add:hover {
    background: #f8f8f8;
    border-color: #131313;
    color: #131313;
}

.product-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.product-modal-full-link {
    font-size: 11px;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.product-modal-full-link:hover {
    color: #131313;
    border-color: #131313;
}

@media (max-width: 600px) {
    .product-modal {
        grid-template-columns: 1fr;
    }

    .product-modal-image {
        min-height: 180px;
    }
}

/* Cart confirmation toast */
.cart-toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #131313;
    color: #ffffff;
    padding: 13px 24px;
    border-radius: 6px;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
    z-index: 2500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-toast.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.cart-toast i {
    color: var(--accent-light);
}

/* Simple shared footer for collection pages */
.site-footer {
    padding: 34px 0;
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
    color: #7f7f7f;
    border-top: 1px solid rgba(var(--accent-rgb), 0.15);
    background: #f8f8f8;
}

.site-footer a {
    color: var(--accent);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--accent-dark);
}

/* Dynamic product catalog */
.products-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--accent-dark);
    font-size: 14px;
}


/* Dynamic product loading error */
.products-load-error {
    width: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px;
    text-align: center;
    color: #2e2e2e;
    grid-column: 1 / -1;
}
.products-load-error strong { font-size: 18px; }
.products-load-error span { font-size: 13px; }
.products-load-error small { max-width: 650px; line-height: 1.6; opacity: .8; }


/* ==========================================================
   PRODUCT DETAILS PAGE (product.html)
   ========================================================== */

.breadcrumb-bar {
    background: #f8f8f8;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
    padding: 16px 0;
}

.breadcrumb {
    width: 92%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    letter-spacing: 0.3px;
    color: #7f7f7f;
}

.breadcrumb a {
    color: #7f7f7f;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--accent);
}

.breadcrumb .breadcrumb-current {
    color: #131313;
    font-weight: 600;
}

.product-detail-section {
    padding: 60px 0 90px;
    background: #ffffff;
}

.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
    text-align: left;
}

.product-detail-gallery {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #efefef;
    position: sticky;
    top: 110px;
}

.product-detail-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}

.product-detail-name {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(30px, 3.6vw, 42px);
    font-weight: 600;
    color: #131313;
    margin-bottom: 12px;
    line-height: 1.15;
}

.product-detail-price {
    font-size: 22px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 22px;
}

.product-detail-summary {
    font-size: 13.5px;
    color: #6f6f6f;
    line-height: 1.9;
    margin-bottom: 28px;
    max-width: 480px;
}

.product-detail-notes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}

.product-detail-note-card {
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    border-radius: 6px;
    padding: 16px 12px;
    text-align: center;
}

.product-detail-note-card span {
    display: block;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 8px;
}

.product-detail-note-card p {
    font-size: 12px;
    color: #212121;
    line-height: 1.5;
}

.product-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.qty-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.qty-btn {
    width: 38px;
    height: 44px;
    background: transparent;
    border: none;
    font-size: 15px;
    color: #131313;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.qty-btn:hover {
    background: var(--accent);
    color: #ffffff;
}

.qty-value {
    width: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #131313;
}

.btn-detail-add-cart {
    padding: 14px 30px;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-detail-add-cart:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.product-detail-meta {
    font-size: 11.5px;
    color: #7f7f7f;
    border-top: 1px solid rgba(var(--accent-rgb), 0.14);
    padding-top: 18px;
}

.product-detail-meta strong {
    color: #212121;
}

.product-not-found {
    padding: 120px 20px;
    text-align: center;
}

.product-not-found h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: 32px;
    color: #131313;
    margin-bottom: 14px;
}

.product-not-found p {
    font-size: 13.5px;
    color: #6f6f6f;
    margin-bottom: 26px;
}

.product-not-found a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    background: var(--accent);
    color: #ffffff;
    text-decoration: none;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.product-not-found a:hover {
    background: var(--accent-dark);
}

.related-products-section {
    padding: 70px 0 100px;
    background: #f8f8f8;
}

@media (max-width: 850px) {
    .product-detail {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-detail-gallery {
        position: static;
    }
}

@media (max-width: 500px) {
    .product-detail-notes-grid {
        grid-template-columns: 1fr;
    }
}

/* FINAL NAVBAR COLOR OVERRIDE — KEEP NAVIGATION CREAM ON HOVER/ACTIVE */
.navbar .brand-logo,
.navbar .brand-logo:hover,
.navbar .brand-logo:focus,
.navbar .brand-logo:active,
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link:active,
.navbar .nav-link.active,
.navbar .dropdown-btn,
.navbar .dropdown-btn:hover,
.navbar .dropdown-btn:focus,
.navbar .dropdown-btn:active,
.navbar .dropdown-btn.active,
.navbar .icon-btn,
.navbar .icon-btn:hover,
.navbar .icon-btn:focus,
.navbar .icon-btn:active {
    color: #ebebeb !important;
    -webkit-text-fill-color: #ebebeb !important;
}

.navbar .brand-text span,
.navbar .brand-logo:hover .brand-text span,
.navbar .brand-logo:focus .brand-text span,
.navbar .brand-logo:active .brand-text span {
    color: #ebebeb !important;
    -webkit-text-fill-color: #ebebeb !important;
}

.navbar .logo-symbol,
.navbar .brand-logo:hover .logo-symbol,
.navbar .brand-logo:focus .logo-symbol,
.navbar .brand-logo:active .logo-symbol {
    color: #ebebeb !important;
    border-color: #ebebeb !important;
}

.navbar .nav-link::after,
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
    background: #ebebeb !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item.active,
.navbar .mobile-nav > a:hover,
.navbar .mobile-nav > a.active,
.navbar .mobile-collection-btn:hover,
.navbar .mobile-collection-btn.active,
.navbar .mobile-dropdown a:hover,
.navbar .mobile-dropdown a.active {
    color: #ebebeb !important;
}

/* FINAL NAVBAR OUTLINE REMOVAL */
.navbar {
    border-bottom: none !important;
    outline: none !important;
}
.navbar::after {
    display: none !important;
    background: none !important;
}
.navbar .nav-link::after,
.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after,
.navbar .nav-link.active::after {
    display: none !important;
    background: none !important;
}


/* HOMEPAGE COLLECTION + FEATURED PRODUCTS BACKGROUND */
.home-featured-products {
    background: #f8f8f8;
    position: relative;
}

.collections-section .section-container,
.home-featured-products .section-container {
    position: relative;
    z-index: 1;
}


/* ==========================================================
   HERO → SHOP BY COLLECTION SEAMLESS FADE
   The collection background gently continues underneath the
   bottom of the hero so there is no visible hard dividing line.
   ========================================================== */
.hero {
    margin-bottom: -90px !important;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000000 0%,
        #000000 calc(100% - 105px),
        transparent 100%
    ) !important;
    mask-image: linear-gradient(
        to bottom,
        #000000 0%,
        #000000 calc(100% - 105px),
        transparent 100%
    ) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    z-index: 2;
}

.collections-section {
    margin-top: 0 !important;
    padding-top: 190px !important;
    position: relative;
    z-index: 1;
}

@media (max-width: 500px) {
    .hero {
        margin-bottom: -70px !important;
        -webkit-mask-image: linear-gradient(
            to bottom,
            #000000 0%,
            #000000 calc(100% - 80px),
            transparent 100%
        ) !important;
        mask-image: linear-gradient(
            to bottom,
            #000000 0%,
            #000000 calc(100% - 80px),
            transparent 100%
        ) !important;
    }

    .collections-section {
        padding-top: 140px !important;
    }
}

/* Women & Men collection pages: remove only the hero banner image; keep all text and links. */
.no-collection-banner .collection-hero-img {
    display: none;
}


/* Collection category banners removed — text retained */
.collection-hero {
    background: #f8f8f8;
    color: #121212;
}
.collection-hero-content h1 { color: #121212; }
.collection-hero-content p { color: #000000; }
.collection-hero-back, .collection-back { color: #121212; }
.collection-back:hover { color: #121212; }
.collection-hero-eyebrow { color: #000000; }

/* ==========================================================
   FINAL PRODUCT DETAIL COLOR CUSTOMIZATION
   ========================================================== */

/* Breadcrumb links: maroon and never switch to gold on hover */
.breadcrumb a {
    color: #121212 !important;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: #121212 !important;
}

/* Collection label above product title */
.product-detail-eyebrow {
    color: #000000 !important;
}

/* Product title */
.product-detail-name {
    color: #121212 !important;
}

/* Product price */
.product-detail-price {
    color: #000000 !important;
}

/* Top / Heart / Base cards */
.product-detail-note-card {
    border-color: #121212 !important;
}

.product-detail-note-card span {
    color: #121212 !important;
}

.product-detail-note-card p {
    color: #000000 !important;
}

/* Quantity selector outline */
.qty-selector {
    border-color: #121212 !important;
}

/* Minus / plus: maroon normally; cream text on maroon hover */
.qty-btn {
    color: #121212 !important;
}

.qty-btn:hover,
.qty-btn:focus {
    background: #121212 !important;
    color: #e9e9e9 !important;
}

/* Add to Cart: maroon normally with cream text */
.btn-detail-add-cart {
    background: #121212 !important;
    border-color: #121212 !important;
    color: #e9e9e9 !important;
}

/* Add to Cart hover: cream background with maroon text */
.btn-detail-add-cart:hover,
.btn-detail-add-cart:focus {
    background: #e9e9e9 !important;
    border-color: #121212 !important;
    color: #121212 !important;
}


/* ==========================================================
   WHY CHOOSE US
   ========================================================== */
.why-choose-us {
    padding: 105px 0 115px;
    background: #f8f8f8;
    text-align: center;
}

.why-choose-container {
    max-width: 1180px;
    margin: 0 auto;
}

.why-choose-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #000000 !important;
}

.why-choose-title {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.05;
    font-weight: 600;
    color: #121212 !important;
}

.why-choose-subtitle {
    margin: 22px auto 0;
    max-width: 760px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.9;
    font-weight: 400;
    color: #000000 !important;
}

.why-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin-top: 55px;
}

.why-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.why-feature-icon {
    position: relative;
    width: 82px;
    height: 82px;
    border: 1px solid #121212;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #121212;
    font-size: 25px;
    background: transparent;
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
    animation: whyCircleFloat 3.8s ease-in-out infinite;
}

.why-feature-icon::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(18, 18, 18, 0.28);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.86);
    transition: opacity .35s ease, transform .45s ease;
    pointer-events: none;
}

.why-feature-icon i {
    transition: transform .4s ease;
}

.why-feature:hover .why-feature-icon {
    background: #121212;
    border-color: #121212;
    color: #e9e9e9;
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 10px 24px rgba(18, 18, 18, 0.18);
    animation-play-state: paused;
}

.why-feature:hover .why-feature-icon::after {
    opacity: 1;
    transform: scale(1);
    animation: whyCirclePulse 1.25s ease-out infinite;
}

.why-feature:hover .why-feature-icon i {
    transform: scale(1.12) rotate(-7deg);
}

@keyframes whyCircleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes whyCirclePulse {
    0% { opacity: .65; transform: scale(.92); }
    100% { opacity: 0; transform: scale(1.25); }
}

.why-feature h3 {
    margin: 18px 0 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #121212 !important;
}

.why-feature-subtitle {
    display: block;
    margin-top: 9px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.8px;
    color: #121212 !important;
}

.why-feature-line {
    width: 42px;
    height: 1px;
    margin: 14px auto 14px;
    background: #121212;
}

.why-feature p {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 1.8;
    font-weight: 400;
    color: #000000 !important;
}

@media (prefers-reduced-motion: reduce) {
    .why-feature-icon,
    .why-feature-icon::after,
    .why-feature-icon i {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 800px) {
    .why-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 20px;
    }
}

@media (max-width: 500px) {
    .why-choose-us {
        padding: 75px 20px 85px;
    }

    .why-choose-title {
        font-size: 42px;
    }

    .why-desktop-break {
        display: none;
    }

    .why-features {
        grid-template-columns: 1fr 1fr;
        gap: 32px 12px;
        margin-top: 42px;
    }
}



/* ==========================================================
   ABOUT OUR BRAND
   ========================================================== */
.about-brand {
    padding: 105px 0 115px;
    background: #ffffff;
}

.about-brand-container {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 72px;
    align-items: center;
}

.about-brand-image-wrap {
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 1.12 / 1;
    background: #e9e9e9;
}

.about-brand-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.about-brand-content {
    text-align: left;
}

.about-brand-eyebrow {
    display: block;
    margin-bottom: 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    color: #000000 !important;
}

.about-brand-title {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(42px, 4.2vw, 60px);
    line-height: 1.05;
    font-weight: 600;
    color: #121212 !important;
}

.about-brand-title em {
    font-style: italic;
    color: #121212 !important;
}

.about-brand-text {
    margin: 24px 0 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.9;
    font-weight: 400;
    color: #000000 !important;
}

.about-brand-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    background: #121212 !important;
    border: 1px solid #121212 !important;
    color: #e9e9e9 !important;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.about-brand-button:hover,
.about-brand-button:focus {
    background: #e9e9e9 !important;
    border-color: #121212 !important;
    color: #121212 !important;
    transform: translateY(-2px);
}

.about-brand-button i {
    transition: transform .3s ease;
}

.about-brand-button:hover i,
.about-brand-button:focus i {
    transform: translateX(4px);
}

@media (max-width: 900px) {
    .about-brand-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-brand-content {
        text-align: center;
    }
}

@media (max-width: 500px) {
    .about-brand {
        padding: 75px 20px 85px;
    }

    .about-brand-container {
        gap: 34px;
    }

    .about-brand-title {
        font-size: 42px;
    }

    .about-desktop-break {
        display: none;
    }

    .about-brand-text {
        font-size: 13px;
    }
}

/* Center the final three Shop by Collection cards on desktop */
@media (min-width: 1200px) {
    .collections-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .collections-grid .collection-card:nth-child(6) {
        grid-column: 2;
    }

    .collections-grid .collection-card:nth-child(7) {
        grid-column: 3;
    }

    .collections-grid .collection-card:nth-child(8) {
        grid-column: 4;
    }
}


/* ==========================================================
   STAY CONNECTED / NEWSLETTER
   ========================================================== */
.stay-connected {
    position: relative;
    overflow: hidden;
    padding: 105px 0 110px;
    background: #e9e9e9 url('stay-connected-bg.png') center center / cover no-repeat;
}

.stay-connected-overlay {
    position: absolute;
    inset: 0;
    background: rgba(233, 233, 233, .42);
    pointer-events: none;
}

.stay-connected-container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
    gap: 105px;
    align-items: center;
}

.stay-newsletter { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; transform: translateX(155px); }

.stay-eyebrow {
    display: block;
    margin-bottom: 17px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    color: #000000 !important;
}

.stay-title {
    margin: 0;
    width: 100%;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(42px, 4.2vw, 58px);
    line-height: 1.05;
    font-weight: 600;
    color: #121212 !important;
}

.stay-subtitle {
    width: 100%;
    max-width: 560px;
    margin: 20px auto 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.85;
    color: #000000 !important;
}

.stay-form {
    width: 100%;
    display: flex;
    align-items: stretch;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.stay-email-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid #121212;
    border-right: 0;
}

.stay-email-wrap i { color: #121212; font-size: 14px; }
.stay-email-wrap input {
    width: 100%;
    height: 52px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #000000;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
}
.stay-email-wrap input::placeholder { color: #000000; opacity: .72; }

.stay-subscribe {
    height: 52px;
    padding: 0 24px;
    border: 1px solid #121212;
    background: #121212;
    color: #e9e9e9;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: .3s ease;
}
.stay-subscribe:hover, .stay-subscribe:focus {
    background: #e9e9e9;
    color: #121212;
}
.stay-subscribe i { transition: transform .3s ease; }
.stay-subscribe:hover i { transform: translateX(4px); }

.stay-benefits {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    max-width: 330px;
    justify-self: start;
    transform: translateX(10px);
}

.stay-benefit {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stay-benefit-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border: 1px solid #121212;
    border-radius: 50%;
    color: #121212;
    background: rgba(255,255,255,.55);
}
.stay-benefit h3 {
    margin: 0 0 4px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 23px;
    font-weight: 600;
    color: #121212 !important;
}
.stay-benefit p {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #000000 !important;
}

@media (max-width: 900px) {
    .stay-connected { padding: 80px 24px; }
    .stay-connected-container { grid-template-columns: 1fr; gap: 55px; }
    .stay-newsletter { text-align: center; transform: none; }
    .stay-subtitle, .stay-form { margin-left: auto; margin-right: auto; }
    .stay-benefits { max-width: 500px; margin: 0 auto; width: 100%; transform: none; }
}

@media (max-width: 560px) {
    .stay-connected { padding: 70px 20px; }
    .stay-title { font-size: 42px; }
    .stay-form { flex-direction: column; gap: 10px; }
    .stay-email-wrap { border-right: 1px solid #121212; }
    .stay-subscribe { width: 100%; justify-content: center; }
}

/* ==========================================================
   VAIL FOOTER
   ========================================================== */
.site-footer {
    background: #060606;
    color: #e9e9e9;
    border-top: 1px solid rgba(233,233,233,.32);
    padding: 42px 0 0;
}
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.footer-top {
    display: grid;
    grid-template-columns: 1.25fr .9fr 1.05fr 1.05fr;
    gap: 62px;
    padding-bottom: 30px;
}
.footer-brand { text-align: center; }
.footer-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; color: #e9e9e9; text-decoration: none; }
.footer-logo-symbol { font-family: Georgia,serif; font-size: 25px; line-height: 1; color: #a9a9a9; }
.footer-logo-name { font-family: 'Cormorant Garamond',Georgia,serif; font-size: 22px; letter-spacing: 2px; color: #a9a9a9; }
.footer-brand > p { margin: 7px 0 14px; font: 300 11px/1.6 'Poppins',sans-serif; color: rgba(233,233,233,.8); }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; }
.footer-column h3 { margin: 0 0 11px; font: 500 13px 'Cormorant Garamond',Georgia,serif; color: #e9e9e9; }
.footer-column a, .footer-column p { margin: 0 0 7px; color: rgba(233,233,233,.78); text-decoration: none; font: 300 9.5px/1.45 'Poppins',sans-serif; transition: color .25s ease; }
.footer-column a:hover { color: #a9a9a9; }
.footer-contact p { display: flex; align-items: center; gap: 8px; }
.footer-contact p i { width: 12px; color: #a9a9a9; font-size: 9px; text-align: center; }
.footer-socials { display: flex; justify-content: center; gap: 8px; }
.footer-socials a { width: 27px; height: 27px; border: 1px solid rgba(169,169,169,.75); border-radius: 50%; display: grid; place-items: center; color: #e9e9e9; text-decoration: none; font-size: 10px; transition: .25s ease; }
.footer-socials a:hover { background: #121212; border-color: #121212; color: #e9e9e9; transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(169,169,169,.45); min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgba(233,233,233,.6); font: 300 8.5px 'Poppins',sans-serif; }
@media (max-width: 850px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 38px 30px; }
}
@media (max-width: 560px) {
  .site-footer { padding-top: 35px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .footer-brand, .footer-column { align-items: center; text-align: center; }
  .footer-contact p { justify-content: center; }
    .footer-bottom { flex-direction: column; justify-content: center; padding: 14px 0; text-align: center; }
}

/* ==========================================================
   VAIL FOOTER — LIGHT LUXURY THEME OVERRIDES
   ========================================================== */
.site-footer {
    background: #f8f8f8;
    color: #000000;
    border-top: 1px solid rgba(18,18,18,.18);
}

.footer-logo,
.footer-logo-symbol,
.footer-logo-name {
    color: #121212 !important;
}

.footer-brand > p {
    color: #000000 !important;
}

.footer-column h3 {
    color: #121212 !important;
}

.footer-column a,
.footer-column p {
    color: #000000 !important;
}

.footer-column a:hover {
    color: #121212 !important;
}


/* Brand social icons: maroon outline, maroon icon */
.footer-socials a {
    border-color: #121212 !important;
    color: #121212 !important;
    background: transparent;
}

.footer-socials a:hover {
    background: #121212 !important;
    border-color: #121212 !important;
    color: #e9e9e9 !important;
}

/* Contact information icons: maroon circles with cream icons */
.footer-contact p i {
    width: 25px;
    height: 25px;
    min-width: 25px;
    border: 1px solid #121212;
    border-radius: 50%;
    background: #121212;
    color: #e9e9e9 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.footer-bottom {
    border-top-color: rgba(18,18,18,.25) !important;
    color: #000000 !important;
}

.favorites-page { min-height: 75vh; padding: 110px 0 80px; background: #f7f7f7; }
.favorites-grid { margin-top: 35px; }
.favorites-empty { grid-column: 1 / -1; text-align: center; padding: 70px 20px; }
.favorites-section-label { grid-column: 1 / -1; margin-top: 18px; padding-bottom: 8px; border-bottom: 1px solid rgba(18,18,18,.12); color: #121212; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.favorites-collection-label { margin-top: 35px; }
.favorite-collection-item { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: #ffffff; border: 1px solid rgba(18,18,18,.09); color: #121212; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.favorite-collection-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,18,18,.08); }
.favorite-collection-item span { display: inline-flex; align-items: center; gap: 10px; }
.favorites-empty i { font-size: 46px; color: #121212; }
.favorites-empty h2 { font-family: "Cormorant Garamond", serif; color: #121212; font-size: 36px; margin: 18px 0 8px; }
.favorites-empty p { margin-bottom: 24px; }
.product-detail-title-row { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.product-detail-favorite { width:44px; height:44px; flex:0 0 44px; border:1px solid rgba(18,18,18,.2); border-radius:50%; background:#ffffff; color:#121212; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.product-detail-favorite.is-favorite { background:#121212; color:#ffffff; border-color:#121212; }


/* Favorites page controls */
.favorites-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;padding:14px 0;border-bottom:1px solid rgba(18,18,18,.12);}
.favorites-summary{color:#121212;font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
.favorites-summary strong{font-size:15px;}
.favorites-clear-btn{border:1px solid rgba(18,18,18,.2);background:transparent;color:#121212;padding:10px 16px;border-radius:2px;font:500 11px Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.2s ease;}
.favorites-clear-btn:hover{background:#121212;color:#ffffff;}
.favorite-stock-status{font-size:11px;color:#2c2c2c;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:2px 0 12px;}
.favorite-stock-status.out-of-stock{color:#292929;}
.favorite-old-price{text-decoration:line-through;opacity:.5;margin-right:6px;}
.favorite-sale-price{font-weight:600;color:#121212;}
.btn-view-details{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid #121212;background:#ffffff;color:#121212;min-height:34px;padding:0 13px;font:600 10px Poppins,sans-serif;letter-spacing:.07em;text-transform:uppercase;}
.btn-view-details:hover{background:#121212;color:#ffffff;}
.favorites-continue-wrap{display:flex;justify-content:center;margin:42px 0 10px;}
.favorites-continue-btn{display:inline-flex;align-items:center;gap:9px;background:#121212;color:#ffffff;text-decoration:none;padding:13px 22px;font:600 11px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;transition:.2s ease;}
.favorites-continue-btn:hover{background:#0e0e0e;transform:translateY(-1px);}
@media(max-width:700px){.favorites-toolbar{align-items:flex-start;flex-direction:column;}.favorites-clear-btn{width:100%;}.btn-view-details{width:100%;margin-top:6px;}.favorites-continue-btn{width:100%;justify-content:center;}}


/* ==========================================================
   SHOPPING CART PAGE
   ========================================================== */
.cart-page{min-height:75vh;padding:110px 0 80px;background:#f7f7f7;}
.cart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;padding:14px 0;border-bottom:1px solid rgba(18,18,18,.12);}
.cart-summary{color:#121212;font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
.cart-summary strong{font-size:15px;}
.cart-clear-btn{border:1px solid rgba(18,18,18,.2);background:transparent;color:#121212;padding:10px 16px;border-radius:2px;font:500 11px Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.2s ease;}
.cart-clear-btn:hover{background:#121212;color:#ffffff;}
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;margin-top:32px;align-items:start;}
.cart-items{display:flex;flex-direction:column;gap:14px;}
.cart-item{display:grid;grid-template-columns:115px minmax(0,1fr) auto;gap:20px;align-items:center;background:#ffffff;border:1px solid rgba(18,18,18,.09);padding:14px;}
.cart-item-image{display:block;aspect-ratio:1/1;overflow:hidden;background:#ebebeb;}
.cart-item-image img{width:100%;height:100%;object-fit:cover;display:block;}
.cart-item-info h3{font-family:"Cormorant Garamond",serif;color:#121212;font-size:24px;font-weight:600;margin:0 0 6px;}
.cart-item-notes{font-size:12px;line-height:1.65;margin:0 0 9px;color:#191919;}
.cart-item-price{font-weight:600;color:#121212;font-size:15px;}
.cart-item-old-price{text-decoration:line-through;opacity:.5;margin-right:6px;font-weight:400;}
.cart-item-qty{display:flex;align-items:center;border:1px solid rgba(18,18,18,.18);width:max-content;margin-top:12px;}
.cart-qty-btn{width:31px;height:31px;border:0;background:#ffffff;color:#121212;cursor:pointer;font-size:16px;}
.cart-qty-value{min-width:34px;text-align:center;font-size:12px;font-weight:600;color:#121212;}
.cart-item-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.cart-item-total{font-size:16px;font-weight:600;color:#121212;white-space:nowrap;}
.cart-remove-btn{border:0;background:transparent;color:#777777;font:500 10px Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:4px 0;}
.cart-remove-btn:hover{color:#121212;}
.cart-summary-card{background:#ffffff;border:1px solid rgba(18,18,18,.09);padding:24px;position:sticky;top:105px;}
.cart-summary-card h2{font-family:"Cormorant Garamond",serif;color:#121212;font-size:30px;margin:0 0 18px;}
.cart-summary-row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;font-size:13px;border-bottom:1px solid rgba(18,18,18,.08);}
.cart-summary-row.total{border-bottom:0;padding-top:18px;font-size:17px;font-weight:600;color:#121212;}
.cart-checkout-btn{display:flex;align-items:center;justify-content:center;width:100%;margin-top:18px;background:#121212;color:#ffffff;text-decoration:none;border:1px solid #121212;padding:14px 18px;font:600 11px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
.cart-checkout-btn:hover{background:#0e0e0e;}
.cart-continue-btn{display:flex;align-items:center;justify-content:center;width:100%;margin-top:10px;background:transparent;color:#121212;text-decoration:none;border:1px solid rgba(18,18,18,.2);padding:13px 18px;font:600 11px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;}
.cart-continue-btn:hover{background:#f7f7f7;}
.cart-empty{grid-column:1/-1;text-align:center;padding:75px 20px;}
.cart-empty i{font-size:46px;color:#121212;}
.cart-empty h2{font-family:"Cormorant Garamond",serif;color:#121212;font-size:36px;margin:18px 0 8px;}
.cart-empty p{margin-bottom:24px;}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr;}.cart-summary-card{position:static;}.cart-item{grid-template-columns:90px minmax(0,1fr);}.cart-item-right{grid-column:2;flex-direction:row;justify-content:space-between;align-items:center;text-align:left;}.cart-item-total{order:2;}.cart-remove-btn{order:1;}}
@media(max-width:600px){.cart-toolbar{align-items:flex-start;flex-direction:column;}.cart-clear-btn{width:100%;}.cart-item{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:10px;}.cart-item-info h3{font-size:20px;}.cart-item-notes{font-size:11px;}.cart-item-right{grid-column:1/-1;}.cart-summary-card{padding:20px;}}


/* CHECKOUT PAGE */
.checkout-page{min-height:75vh;padding:105px 0 80px;background:#f7f7f7;}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:28px;margin-top:55px;align-items:start;}
.checkout-form-card,.checkout-order-card{background:#ffffff;border:1px solid rgba(18,18,18,.10);padding:28px;}
.checkout-order-card{position:sticky;top:105px;}
.checkout-card-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e1e1e1;padding-bottom:15px;margin-bottom:22px;}
.checkout-card-heading h2,.checkout-order-card h2{font-family:"Cormorant Garamond",serif;color:#121212;font-size:29px;font-weight:600;margin:0;}
.checkout-card-heading span{font-size:10px;letter-spacing:.08em;color:#797979;text-transform:uppercase;}
.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.checkout-grid label{display:flex;flex-direction:column;gap:7px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#121212;font-weight:600;}
.checkout-grid label.full{grid-column:1/-1;}
.checkout-grid input{width:100%;border:1px solid #cecece;background:#fbfbfb;padding:13px 14px;font:400 13px Poppins,sans-serif;color:#131313;outline:none;transition:border-color .2s,box-shadow .2s;}
.checkout-grid input:focus{border-color:#656565;box-shadow:0 0 0 3px rgba(18,18,18,.06);}
.checkout-payment-heading{margin-top:30px;margin-bottom:14px;}
.payment-option{display:flex;gap:12px;align-items:flex-start;border:1px solid #dadada;padding:15px;margin-top:10px;cursor:pointer;background:#fdfdfd;}
.payment-option input{accent-color:#121212;margin-top:4px;}
.payment-option span{display:flex;flex-direction:column;gap:3px;}
.payment-option strong{font-size:12px;color:#121212;}
.payment-option small{font-size:10px;color:#737373;}
.checkout-order-card h2{margin-bottom:20px;}
.checkout-order-item{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #e7e7e7;}
.checkout-order-item img{width:58px;height:68px;object-fit:cover;background:#efefef;}
.checkout-order-item div{display:flex;flex-direction:column;gap:4px;min-width:0;}
.checkout-order-item strong{font-family:"Cormorant Garamond",serif;font-size:18px;color:#121212;}
.checkout-order-item small{font-size:10px;color:#737373;}
.checkout-order-item b{font-size:12px;color:#121212;white-space:nowrap;}
.checkout-total-row{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid #e7e7e7;font-size:12px;}
.checkout-total-row.grand{font-size:16px;color:#121212;border-bottom:0;padding-top:18px;}
.checkout-place-btn{width:100%;border:1px solid #121212;background:#121212;color:#ffffff;padding:15px 18px;margin-top:12px;font:600 11px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
.checkout-place-btn:hover{background:#0e0e0e;}
.checkout-order-card .cart-continue-btn{display:flex;margin-top:10px;}
.checkout-empty{text-align:center;padding:80px 20px;background:#ffffff;border:1px solid rgba(18,18,18,.1);margin-top:45px;}
.checkout-empty i{font-size:35px;color:#121212;margin-bottom:15px;}
.checkout-empty h2{font-family:"Cormorant Garamond",serif;color:#121212;font-size:32px;margin-bottom:8px;}
.checkout-empty p{font-size:13px;margin-bottom:22px;}
.checkout-success{position:fixed;inset:0;z-index:3000;background:rgba(10,10,10,.48);display:flex;align-items:center;justify-content:center;padding:20px;}
.checkout-success[hidden]{display:none;}
.checkout-success-card{width:min(520px,100%);background:#f7f7f7;text-align:center;padding:48px 30px;border:1px solid rgba(170,170,170,.5);box-shadow:0 25px 70px rgba(8,8,8,.3);}
.success-icon{width:58px;height:58px;border-radius:50%;background:#121212;color:#ffffff;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:20px;}
.checkout-success-card h2{font-family:"Cormorant Garamond",serif;color:#121212;font-size:38px;margin:12px 0 8px;}
.checkout-success-card p{font-size:13px;line-height:1.7;}
.checkout-success-card .order-number{margin:15px 0 25px;color:#121212;}
@media(max-width:900px){.checkout-layout{grid-template-columns:1fr;}.checkout-order-card{position:static;}.checkout-grid{grid-template-columns:1fr;}.checkout-grid label.full{grid-column:auto;}}
@media(max-width:600px){.checkout-page{padding:75px 0 55px;}.checkout-form-card,.checkout-order-card{padding:20px;}.checkout-card-heading{align-items:flex-start;gap:10px;flex-direction:column;}.checkout-success-card h2{font-size:31px;}}

.search-page-products .btn-quick-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ACCOUNT PAGE */
.account-page{min-height:75vh;padding:110px 0 90px;background:#f7f7f7;}
.account-auth{max-width:620px;margin:0 auto;text-align:center;}
.account-auth .section-subtitle{max-width:520px;margin-left:auto;margin-right:auto;}
.auth-card{margin-top:38px;background:#ffffff;border:1px solid rgba(18,18,18,.10);padding:28px;text-align:left;box-shadow:0 15px 45px rgba(15,15,15,.05);}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #e1e1e1;margin-bottom:24px;}
.auth-tab{border:0;background:transparent;padding:13px 10px;color:#797979;font:500 12px Poppins,sans-serif;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;}
.auth-tab.active{color:#121212;border-bottom-color:#121212;}
.auth-form{display:flex;flex-direction:column;gap:15px;}
.auth-form label,.account-form-grid label{display:flex;flex-direction:column;gap:7px;color:#121212;font:600 11px Poppins,sans-serif;letter-spacing:.04em;text-transform:uppercase;}
.auth-form input,.account-form-grid input{width:100%;box-sizing:border-box;border:1px solid #cecece;background:#fbfbfb;padding:13px 14px;outline:none;font:400 13px Poppins,sans-serif;color:#131313;transition:.2s;}
.auth-form input:focus,.account-form-grid input:focus{border-color:#656565;box-shadow:0 0 0 3px rgba(18,18,18,.06);}
.account-primary-btn,.account-outline-btn,.text-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;font:600 11px Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;}
.account-primary-btn{border:1px solid #121212;background:#121212;color:#ffffff;padding:13px 20px;}
.account-primary-btn:hover{background:#0e0e0e;}
.account-outline-btn{border:1px solid rgba(18,18,18,.22);background:transparent;color:#121212;padding:11px 16px;}
.account-outline-btn:hover{background:#ffffff;}
.text-btn{border:0;background:none;color:#121212;padding:4px 0;}
.auth-note{font-size:10px;color:#797979;line-height:1.6;margin:0;}
.form-message{font-size:11px;line-height:1.5;margin:0;min-height:16px;color:#121212;}
.form-message.error{color:#272727}.form-message.success{color:#2c2c2c}
.account-heading-row{display:flex;justify-content:space-between;gap:25px;align-items:flex-end;margin-bottom:40px;}
.account-heading-row .section-title{margin-bottom:5px;}
.account-heading-row .section-subtitle{margin:0;}
.account-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:26px;align-items:start;}
.account-sidebar{background:#ffffff;border:1px solid rgba(18,18,18,.09);padding:10px;position:sticky;top:105px;}
.account-side-link{width:100%;display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#292929;padding:13px 14px;text-align:left;text-decoration:none;font:500 11px Poppins,sans-serif;cursor:pointer;}
.account-side-link i{width:17px;text-align:center;color:#757575;}.account-side-link:hover,.account-side-link.active{background:#f7f7f7;color:#121212;}.account-side-link.active i{color:#121212;}
.account-content{min-width:0;}.account-view[hidden]{display:none;}
.account-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:22px;}
.account-stat{background:#ffffff;border:1px solid rgba(18,18,18,.09);padding:21px;display:flex;flex-direction:column;gap:5px;}.account-stat i{font-size:17px;color:#121212;margin-bottom:5px;}.account-stat strong{font:600 25px "Cormorant Garamond",serif;color:#121212;}.account-stat span{font-size:10px;color:#797979;text-transform:uppercase;letter-spacing:.08em;}
.account-panel{background:#ffffff;border:1px solid rgba(18,18,18,.09);padding:25px;}.account-panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid #e1e1e1;padding-bottom:14px;margin-bottom:17px;}.account-panel-head h2{font:600 28px "Cormorant Garamond",serif;color:#121212;margin:0;}.account-muted{font-size:10px;color:#797979;}
.account-order-list{display:flex;flex-direction:column;gap:12px;}.account-order-card{border:1px solid #e1e1e1;padding:16px;background:#fdfdfd;}.account-order-top{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;}.account-order-top div{display:flex;flex-direction:column;gap:3px;}.account-order-top strong{font:600 19px "Cormorant Garamond",serif;color:#121212;}.account-order-top small{font-size:10px;color:#797979;}.order-status{font-size:9px;text-transform:uppercase;letter-spacing:.08em;padding:6px 8px;border:1px solid #cecece;color:#121212;}.order-status.processing{background:#f4f4f4}.order-status.shipped{background:#f4f4f4}.order-status.delivered{background:#f4f4f4}.order-status.cancelled{background:#f4f4f4;}
.account-order-products{margin:13px 0;border-top:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;}.account-order-products>div{display:flex;justify-content:space-between;gap:15px;padding:9px 0;font-size:11px;color:#252525;}.account-order-products strong{color:#121212;}.account-order-bottom{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#797979;}.account-order-bottom strong{color:#121212;}
.account-empty{text-align:center;padding:42px 15px;color:#797979;}.account-empty.compact{padding:28px 15px;}.account-empty i{font-size:28px;color:#121212;margin-bottom:9px;}.account-empty h3{font:600 25px "Cormorant Garamond",serif;color:#121212;margin:4px 0;}.account-empty p{font-size:11px;margin:0 0 18px;}.account-empty .account-primary-btn{display:inline-flex;}
.account-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}.account-form-grid .full{grid-column:1/-1;}.account-form-grid .account-primary-btn{width:max-content;}
.account-nav-active{color:#ffffff!important;}
@media(max-width:900px){.account-page{padding:85px 0 60px}.account-heading-row{align-items:flex-start;flex-direction:column}.account-layout{grid-template-columns:1fr}.account-sidebar{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:3px}.account-stat-grid{grid-template-columns:1fr 1fr}.account-side-link{padding:12px 10px}.account-form-grid{grid-template-columns:1fr}.account-form-grid .full{grid-column:auto}}
@media(max-width:600px){.account-auth{padding:0 4px}.auth-card,.account-panel{padding:18px}.auth-tabs{margin-bottom:18px}.account-stat-grid{grid-template-columns:1fr}.account-sidebar{grid-template-columns:1fr 1fr}.account-panel-head{align-items:flex-start;flex-direction:column}.account-order-bottom{flex-direction:column;gap:5px}.account-heading-row .section-title{font-size:40px}}

/* ACCOUNT PAGE NAVBAR — use the same header system as the rest of the VAIL site */
.account-page + * { box-sizing: border-box; }
.navbar .account-nav-active { color: #ebebeb !important; -webkit-text-fill-color: #ebebeb !important; }
.navbar .account-nav-active i { color: #ebebeb !important; }
@media (max-width: 900px) {
    .account-page { padding-top: 85px; }
}

/* ACCOUNT ENTRY + SEPARATE AUTH PAGES */
.account-welcome{max-width:720px;}
.account-choice-card{margin:38px auto 0;background:#ffffff;border:1px solid rgba(18,18,18,.10);padding:38px 42px;text-align:center;box-shadow:0 15px 45px rgba(15,15,15,.05);}
.account-choice-icon{width:58px;height:58px;margin:0 auto 16px;border:1px solid #cecece;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#121212;font-size:20px;}
.account-choice-card h2{font:600 32px "Cormorant Garamond",serif;color:#121212;margin:0 0 7px;}
.account-choice-card>p{font-size:12px;line-height:1.8;color:#797979;max-width:480px;margin:0 auto;}
.account-choice-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:27px 0 16px;}
.account-choice-actions .account-primary-btn,.account-choice-actions .account-outline-btn{min-width:145px;}
.account-contact-btn,.auth-contact-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#121212;text-decoration:none;font:500 10px Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;}
.account-contact-btn:hover,.auth-contact-link:hover{text-decoration:underline;}
.auth-page-links{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:22px;padding-top:19px;border-top:1px solid #e1e1e1;font-size:11px;color:#797979;}
.auth-page-links a{color:#121212;font-weight:600;text-decoration:none;}
.auth-page-links a:hover{text-decoration:underline;}
.auth-contact-link{width:100%;margin-top:4px;}
@media(max-width:600px){.account-choice-card{padding:30px 20px}.account-choice-card h2{font-size:28px}.account-choice-actions{flex-direction:column}.account-choice-actions .account-primary-btn,.account-choice-actions .account-outline-btn{width:100%;box-sizing:border-box}}

/* Account authentication navigation */
.auth-back-links{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:14px;padding-top:14px;border-top:1px solid #e8e8e8;font-size:10px;letter-spacing:.06em;text-transform:uppercase;}
.auth-back-links a{color:#303030;text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:6px;}
.auth-back-links a:first-child{color:#121212;font-weight:600;}
.auth-back-links a:hover{color:#121212;text-decoration:underline;}
@media(max-width:600px){.auth-back-links{flex-direction:column;gap:10px;}}

/* ===== Black & white theme: photos are shown in monochrome too ===== */
img, .single-collection-hero, .collection-card-img, .product-card img { filter: grayscale(1); }

/* Shop by Collection: dark background image -> light heading text (cards stay white) */
.collections-section > .section-container > .section-eyebrow,
.collections-section > .section-container > .section-title,
.collections-section > .section-container > .section-subtitle { color: #fff; }
.collections-section > .section-container > .section-eyebrow::before,
.collections-section > .section-container > .section-eyebrow::after { background: rgba(255,255,255,.7); }

/* ==========================================================
   SHOP BY COLLECTION — editorial photo cards (no circles)
   ========================================================== */
.collections-section { padding-top: 110px !important; }
.collections-section .section-container { text-align: center; }
.collections-section .section-eyebrow {
    display: block; margin: 0; color: #fff;
    font-family: "Cormorant Garamond", serif; font-weight: 400;
    font-size: clamp(20px, 2.4vw, 28px); letter-spacing: .42em; padding-left: .42em;
}
.collections-section .section-eyebrow::before,
.collections-section .section-eyebrow::after { display: none; }
.collections-section .section-title {
    color: #fff; font-weight: 500; text-transform: uppercase;
    font-size: clamp(40px, 6.4vw, 84px); letter-spacing: .14em; padding-left: .14em;
    line-height: 1.1; margin: 6px 0 0;
}
.collections-section .section-title::after {
    content: ""; display: block; width: 70px; height: 1px;
    background: rgba(255,255,255,.75); margin: 30px auto 0;
}
.collections-section .section-subtitle {
    color: rgba(255,255,255,.88); font-family: "Cormorant Garamond", serif; font-weight: 500;
    font-size: clamp(16px, 1.6vw, 20px); letter-spacing: .07em; line-height: 1.7;
    max-width: 640px; margin: 28px auto 64px;
}

.collections-section .collections-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}
@media (min-width: 1200px) {
    .collections-section .collections-grid .collection-card:nth-child(n) { grid-column: auto; }
}
@media (max-width: 1000px) { .collections-section .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .collections-section .collections-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } }

.collections-section .collection-card {
    position: relative; overflow: hidden;
    aspect-ratio: 335 / 535;
    padding: 0 30px 32px;
    justify-content: flex-end; align-items: flex-start; text-align: left;
    background: #050505;
    border: 1px solid rgba(255,255,255,.22); border-radius: 0;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.collections-section .collection-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,.6);
    box-shadow: 0 24px 50px rgba(0,0,0,.6);
}
.collections-section .collection-card-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 68%;
    margin: 0; border: 0; border-radius: 0; overflow: hidden;
}
.collections-section .collection-card-img::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(5,5,5,0) 55%, #050505 100%);
}
.collections-section .collection-card-img img { width: 100%; height: 100%; object-fit: cover; }
.collections-section .collection-name,
.collections-section .collection-tagline,
.collections-section .collection-explore { position: relative; z-index: 2; }
.collections-section .collection-name {
    font-family: "Cormorant Garamond", serif; font-weight: 500;
    font-size: clamp(21px, 1.9vw, 26px); letter-spacing: .1em; line-height: 1.35;
    color: #fff; margin: 0 0 14px;
}
.collections-section .collection-tagline {
    font-family: "Cormorant Garamond", serif; font-weight: 500;
    font-size: 16px; letter-spacing: .06em; text-transform: none;
    color: rgba(255,255,255,.8); margin: 0 0 26px;
}
.collections-section .collection-explore {
    font-family: "Poppins", sans-serif; font-weight: 400;
    font-size: 11px; letter-spacing: .2em; color: #fff;
}
.collections-section .collection-explore:hover { color: #fff; border-color: #fff; }
@media (max-width: 500px) { .collections-section { padding-top: 80px !important; } }
@media (max-width: 560px) { .collections-section .section-subtitle br { display: none; } }


/* ===== VAIL LOGO ===== */
.brand-logo-img { height: 46px; width: auto; display: block; object-fit: contain; }
.footer-logo-img { height: 64px; width: auto; display: block; object-fit: contain; margin-bottom: 6px; }
@media (max-width: 560px) { .brand-logo-img { height: 38px; } .footer-logo-img { height: 54px; } }

/* ===== TRANSPARENT NAVBAR (home page hero) ===== */
body.has-hero .navbar {
    position: fixed;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
body.has-hero .navbar::before {
    content: "";
    position: absolute;
    inset: 0 0 -30px 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0));
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.4s ease;
}
body.has-hero .navbar::after { opacity: 0; }
body.has-hero.nav-scrolled .navbar {
    background: rgba(18, 18, 18, 0.97) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom-color: rgba(170, 170, 170, 0.28) !important;
    box-shadow: 0 4px 24px rgba(9, 9, 9, 0.22) !important;
}
body.has-hero.nav-scrolled .navbar::before { opacity: 0; }
body.has-hero.nav-scrolled .navbar::after { opacity: 1; }

/* ==========================================================
   FEATURED PRODUCTS — "Our Best Sellers" carousel (home)
   ========================================================== */
.home-featured-products { background: #f8f8f6; padding: 100px 0 110px; }
.home-featured-products .section-container { text-align: center; }
.home-featured-products .section-eyebrow {
    color: #111; font-size: 13px; font-weight: 500; letter-spacing: .5em; padding-left: .5em; margin-bottom: 14px;
}
.home-featured-products .section-eyebrow::before,
.home-featured-products .section-eyebrow::after { width: 52px; background: #111; }
.home-featured-products .section-title {
    font-family: "Cormorant Garamond", serif; font-weight: 500; color: #0b0b0b;
    font-size: clamp(42px, 6vw, 76px); line-height: 1.05; letter-spacing: -.5px; margin: 0 0 22px;
}
.home-featured-products .section-subtitle {
    color: #6e6e6e; font-size: clamp(15px, 1.5vw, 18px); letter-spacing: .04em; line-height: 1.75;
    max-width: 560px; margin: 0 auto 38px;
}

.fp-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 46px; }
.fp-tab {
    font-family: "Poppins", sans-serif; font-size: 14px; letter-spacing: .06em; color: #222;
    background: transparent; border: 0; border-radius: 999px; padding: 12px 30px; cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.fp-tab:hover { background: rgba(0,0,0,.06); }
.fp-tab.active { background: #151515; color: #fff; }

.fp-carousel { position: relative; padding: 0 30px; }
.home-featured-products .fp-track {
    display: grid; grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 3 * 28px) / 4);
    gap: 28px; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; text-align: left; padding-bottom: 4px;
}
.home-featured-products .fp-track::-webkit-scrollbar { display: none; }
.fp-arrow {
    position: absolute; top: 36%; z-index: 3; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid #bdbdbd; background: #f8f8f6; color: #111; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.fp-arrow:hover:not(:disabled) { background: #111; color: #fff; border-color: #111; }
.fp-arrow:disabled { opacity: .35; cursor: default; }
.fp-prev { left: -8px; }
.fp-next { right: -8px; }

.fp-card { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; }
.fp-card-image {
    position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
    border-radius: 4px; background: #111; margin-bottom: 0;
}
.fp-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.fp-card:hover .fp-card-image img { transform: scale(1.05); }
.fp-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 14px; border-radius: 999px;
    background: #0b0b0b; color: #fff; border: 1px solid rgba(255,255,255,.25);
    font-family: "Poppins", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.fp-name { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 26px; line-height: 1.2; margin: 0 0 10px; }
.fp-name a { color: #0b0b0b; text-decoration: none; }
.fp-label { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #8a8a8a; margin: 0 0 10px; }
.fp-notes { font-size: 13.5px; color: #8a8a8a; margin: 0 0 20px; min-height: 22px; }
.fp-dot { font-style: normal; margin: 0 9px; font-size: 11px; }
.fp-price { font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 500; color: #111; margin: 0 0 18px; margin-top: auto; }
.fp-price-was { margin-left: 10px; font-size: 14px; font-weight: 400; color: #8a8a8a; }
.fp-add {
    display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 48px;
    background: #151515; color: #fff; border: 0; border-radius: 3px; cursor: pointer;
    font-family: "Poppins", sans-serif; font-size: 14px; letter-spacing: .03em;
    transition: background .25s ease, transform .25s ease;
}
.fp-add:hover { background: #000; transform: translateY(-2px); }

.fp-view-all {
    display: inline-flex; align-items: center; gap: 16px; margin-top: 62px; padding: 19px 46px;
    border: 1px solid #111; border-radius: 3px; color: #111; text-decoration: none;
    font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .22em;
    transition: background .25s ease, color .25s ease;
}
.fp-view-all:hover { background: #111; color: #fff; }

@media (max-width: 1000px) {
    .home-featured-products .fp-track { grid-auto-columns: calc((100% - 28px) / 2); }
}
@media (max-width: 600px) {
    .home-featured-products { padding: 70px 0 80px; }
    .home-featured-products .section-subtitle br { display: none; }
    .fp-carousel { padding: 0; }
    .home-featured-products .fp-track { grid-auto-columns: 78%; gap: 18px; }
    .fp-arrow { display: none; }
    .fp-tab { padding: 10px 18px; }
    .fp-name { font-size: 24px; }
    .home-featured-products .section-eyebrow { font-size: 11px; letter-spacing: .32em; padding-left: .32em; gap: 10px; }
    .home-featured-products .section-eyebrow::before,
    .home-featured-products .section-eyebrow::after { width: 22px; }
}


/* ---- Featured category cards: heart on picture, name + short line below ---- */
.fp-media { position: relative; margin-bottom: 22px; }
.fp-media .fp-card-image { aspect-ratio: 4 / 5; }
.fp-media .product-favorite { top: 14px; right: 14px; }
.fp-name { margin-bottom: 8px; }
.fp-notes { font-size: 14px; line-height: 1.6; color: #6e6e6e; min-height: 46px; margin: 0 0 20px; }
.fp-card .fp-add { margin-top: auto; }


/* ---- View Details label + detail window ---- */
.fp-card-image { cursor: pointer; }
.fp-view-label {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2;
    padding: 10px 24px; border-radius: 999px; white-space: nowrap;
    background: rgba(255,255,255,.94); color: #111; font-family: "Poppins", sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    transition: background .25s ease, color .25s ease;
}
.fp-card-image:hover .fp-view-label { background: #111; color: #fff; }
.fp-view-btn {
    width: 100%; height: 46px; margin-bottom: 10px; background: transparent; color: #111;
    border: 1px solid #111; border-radius: 3px; cursor: pointer;
    font-family: "Poppins", sans-serif; font-size: 13px; letter-spacing: .08em;
    transition: background .25s ease, color .25s ease;
}
.fp-view-btn:hover { background: #111; color: #fff; }

.fp-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; }
.fp-modal.active { display: flex; }
.fp-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); }
.fp-modal-box {
    position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; width: min(1000px, 100%);
    max-height: 92vh; overflow: auto; background: #fff; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.fp-modal-close {
    position: absolute; top: 12px; right: 14px; z-index: 5; width: 40px; height: 40px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.92); color: #111; font-size: 26px; line-height: 1; cursor: pointer;
}
.fp-modal-close:hover { background: #111; color: #fff; }
.fp-modal-media { background: #111; min-height: 360px; }
.fp-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-modal-info { padding: 44px 40px 36px; text-align: left; display: flex; flex-direction: column; }
.fp-modal-eyebrow { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 10px; }
.fp-modal-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.fp-modal-name { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 38px; line-height: 1.1; margin: 0 0 12px; color: #0b0b0b; }
.fp-modal-heart.product-favorite { position: static; flex: none; margin-right: 34px; }
.fp-modal-price { font-family: "Poppins", sans-serif; font-size: 22px; font-weight: 500; color: #111; margin-bottom: 18px; }
.fp-modal-about { font-size: 15px; line-height: 1.75; color: #555; margin: 0 0 22px; }
.fp-modal-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.fp-note { background: #f6f5f2; border-radius: 4px; padding: 12px 12px 14px; }
.fp-note span { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 6px; }
.fp-note p { margin: 0; font-size: 13px; line-height: 1.5; color: #111; }
.fp-modal-meta { font-size: 13px; color: #444; margin-bottom: 24px; }
.fp-modal-meta span { font-weight: 600; margin-right: 6px; color: #111; }
.fp-modal-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.fp-qty { display: inline-flex; align-items: center; border: 1px solid #d5d5d5; border-radius: 3px; height: 50px; background: #fff; }
.fp-qty .qty-btn { width: 46px; height: 100%; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: #111; }
.fp-qty .qty-btn:hover { background: #111; color: #fff; }
.fp-qty .qty-value { min-width: 42px; text-align: center; font-size: 16px; font-weight: 600; color: #111; }
.fp-modal-add {
    flex: 1; height: 50px; background: #151515; color: #fff; border: 0; border-radius: 3px; cursor: pointer;
    font-family: "Poppins", sans-serif; font-size: 14px; letter-spacing: .04em; transition: background .25s ease;
}
.fp-modal-add:hover { background: #000; }
.fp-modal-full { color: #111; font-size: 13px; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
    .fp-modal { padding: 10px; align-items: flex-end; }
    .fp-modal-box { grid-template-columns: 1fr; max-height: 94vh; }
    .fp-modal-media { min-height: 0; aspect-ratio: 1 / 1; }
    .fp-modal-info { padding: 26px 22px 28px; }
    .fp-modal-name { font-size: 30px; }
    .fp-modal-heart.product-favorite { margin-right: 0; }
}


/* ---- Product page: back link + More Collections ---- */
.product-back-link {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; color: #111; text-decoration: none;
    font-family: "Poppins", sans-serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.product-back-link i { transition: transform .25s ease; }
.product-back-link:hover i { transform: translateX(-4px); }
.more-col-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; text-align: left; }
.more-col-grid .fp-view-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
@media (max-width: 900px) { .more-col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .more-col-grid { grid-template-columns: 1fr; } }

.more-col-grid .fp-price { margin-top: 0; margin-bottom: 14px; }
.more-col-grid .fp-card-image { aspect-ratio: 4 / 5; }
.product-back-link { padding: 10px 18px; border: 1px solid #d5d5d5; border-radius: 999px; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.product-back-link:hover { background: #111; color: #fff; border-color: #111; }
.product-detail-section .product-back-link { display: flex; width: fit-content; margin: 0 auto 26px 0; }

/* VAIL luxury welcome screen for account entry */
.account-page:has(.account-welcome-luxe){min-height:calc(100vh - 90px);padding:54px 0 70px;background:#f4f2ed;position:relative;overflow:hidden;}
.account-page:has(.account-welcome-luxe)::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,#b99a58,#e4d4ae,#b99a58,transparent);}
.account-welcome-luxe{width:100%;max-width:1120px;min-height:560px;margin:0 auto;position:relative;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;text-align:left;background:#111;padding:68px 7.2% 76px;box-sizing:border-box;overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.13);}
.account-welcome-luxe::before{content:"";position:absolute;inset:16px;border:1px solid rgba(194,163,98,.32);pointer-events:none;z-index:2;}
.welcome-luxe-copy{position:relative;z-index:3;max-width:460px;color:#fff;padding:12px 0 0;}
.welcome-kicker{display:flex;align-items:center;gap:12px;color:#c9ad73;font:500 9px Poppins,sans-serif;letter-spacing:.24em;margin-bottom:35px;}
.welcome-kicker span{display:inline-block;width:25px;height:1px;background:#c9ad73;}
.welcome-overline{font:500 9px Poppins,sans-serif;letter-spacing:.2em;color:#c8c2b7;margin:0 0 13px;}
.welcome-luxe-copy h1{font:500 clamp(48px,6vw,76px)/.92 "Cormorant Garamond",serif;letter-spacing:-.035em;color:#f8f6f0;margin:0 0 25px;}
.welcome-luxe-copy h1 em{font-weight:600;color:#c7a96a;font-style:italic;letter-spacing:.02em;}
.welcome-description{font:300 12px/2 Poppins,sans-serif;color:#c6c2ba;max-width:360px;margin:0 0 30px;}
.welcome-luxe-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.welcome-get-started{min-width:158px;min-height:47px;padding:0 20px;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;box-sizing:border-box;background:#c5a568;color:#111;text-decoration:none;font:600 10px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;transition:background .25s,transform .25s;}
.welcome-get-started:hover{background:#e0c58d;transform:translateY(-2px);}
.welcome-get-started i{font-size:12px;}
.welcome-create-account{color:#f3eee4;text-decoration:none;font:500 9px Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(201,173,115,.55);padding:0 0 7px;}
.welcome-create-account i{font-size:9px;margin-left:5px;color:#c9ad73;}
.welcome-trust-note{display:flex;align-items:center;gap:10px;margin-top:39px;color:#a9a49b;font:300 9px Poppins,sans-serif;letter-spacing:.04em;}
.welcome-trust-note i{color:#c9ad73;font-size:12px;}
.welcome-luxe-visual{position:relative;align-self:stretch;min-height:390px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.welcome-luxe-visual::before{content:"";position:absolute;width:min(30vw,350px);height:min(30vw,350px);min-width:230px;min-height:230px;border-radius:50%;background:radial-gradient(circle,rgba(198,166,101,.18),rgba(198,166,101,.04) 55%,transparent 70%);}
.welcome-perfume-bottle{position:relative;z-index:1;width:clamp(250px,31vw,400px);height:auto;max-height:440px;object-fit:contain;filter:grayscale(1) drop-shadow(0 25px 22px rgba(0,0,0,.42));transform:rotate(-7deg);}
.welcome-orbit{position:absolute;border:1px solid rgba(201,173,115,.26);border-radius:50%;width:310px;height:310px;}
.welcome-orbit-one{transform:scaleX(.7) rotate(32deg);}.welcome-orbit-two{width:365px;height:365px;transform:scaleX(.72) rotate(-30deg);border-color:rgba(255,255,255,.09);}
.welcome-visual-label{position:absolute;top:17%;right:0;z-index:2;color:#c9ad73;font:500 8px Poppins,sans-serif;letter-spacing:.18em;writing-mode:vertical-rl;}
.welcome-visual-label span{padding:9px 0;}
.welcome-visual-caption{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;color:#a9a49b;font:400 7px Poppins,sans-serif;letter-spacing:.18em;}
.welcome-visual-caption i{display:inline-block;width:22px;height:1px;background:#c9ad73;}
.welcome-contact-link{position:absolute;z-index:3;bottom:25px;left:7.2%;color:#a9a49b;text-decoration:none;font:400 9px Poppins,sans-serif;letter-spacing:.04em;}
.welcome-contact-link i{color:#c9ad73;margin-right:7px;}
@media(max-width:760px){.account-page:has(.account-welcome-luxe){padding:28px 14px 45px}.account-welcome-luxe{grid-template-columns:1fr;padding:45px 28px 72px;min-height:0;gap:0}.welcome-luxe-copy{padding-top:8px}.welcome-kicker{margin-bottom:27px}.welcome-luxe-copy h1{font-size:58px}.welcome-description{max-width:440px}.welcome-luxe-visual{min-height:300px;margin-top:8px}.welcome-perfume-bottle{width:270px;max-height:310px}.welcome-orbit{width:245px;height:245px}.welcome-orbit-two{width:290px;height:290px}.welcome-visual-label{right:7%;top:13%}.welcome-visual-caption{bottom:2%}.welcome-contact-link{left:28px;bottom:25px}.welcome-trust-note{margin-top:27px}}
@media(max-width:420px){.account-welcome-luxe{padding:38px 21px 75px}.account-welcome-luxe::before{inset:10px}.welcome-luxe-copy h1{font-size:51px}.welcome-luxe-actions{align-items:flex-start;flex-direction:column;gap:17px}.welcome-get-started{width:100%}.welcome-luxe-visual{min-height:260px}.welcome-perfume-bottle{width:235px}.welcome-orbit{width:210px;height:210px}.welcome-orbit-two{width:250px;height:250px}.welcome-contact-link{left:21px;font-size:8px}}

/* VAIL Welcome v2 — warm editorial luxury, rounded card and fragrance showcase */
.account-page:has(.account-welcome-luxe){
  min-height:calc(100vh - 90px);padding:48px 22px 62px;
  background:radial-gradient(ellipse at 10% 15%,rgba(201,162,39,.10),transparent 34%),#f7f1e8;
  position:relative;overflow:hidden;box-sizing:border-box;
}
.account-page:has(.account-welcome-luxe)::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(73,18,29,.07) .7px,transparent .7px);background-size:13px 13px;opacity:.22;pointer-events:none}
.account-welcome-luxe{
  width:100%;max-width:1140px;min-height:610px;margin:0 auto;position:relative;isolation:isolate;
  display:grid;grid-template-columns:1fr .92fr;align-items:stretch;text-align:left;
  background:#fffdf9;padding:0;border:1px solid rgba(73,18,29,.09);border-radius:24px;box-sizing:border-box;
  overflow:hidden;box-shadow:0 26px 70px rgba(65,31,29,.13);
}
.account-welcome-luxe::before{inset:12px;border:1px solid rgba(201,162,39,.18);border-radius:16px;pointer-events:none;z-index:4}
.welcome-luxe-copy{max-width:500px;align-self:center;padding:62px 22px 76px clamp(32px,6vw,78px);color:#2d2422;}
.welcome-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 29px;padding:9px 14px;border-radius:99px;background:#f7eee4;color:#7d2938;font:600 9px Poppins,sans-serif;letter-spacing:.17em}
.welcome-kicker span{width:15px;background:#c9a227}
.welcome-overline{font:600 9px Poppins,sans-serif;letter-spacing:.22em;color:#a17c37;margin:0 0 14px}
.welcome-luxe-copy h1{font:500 clamp(54px,5.5vw,78px)/.91 "Cormorant Garamond",serif;letter-spacing:-.045em;color:#2c2523;margin:0 0 24px}
.welcome-luxe-copy h1 em{display:inline-block;color:#7b2636;font-weight:600;font-style:italic;letter-spacing:-.015em;margin-top:8px}
.welcome-description{font:300 13px/2 Poppins,sans-serif;color:#746966;max-width:390px;margin:0 0 30px}
.welcome-luxe-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.welcome-get-started{min-width:175px;min-height:52px;padding:0 21px;border-radius:4px;background:#7b2636;color:#fffaf4;font:600 10px Poppins,sans-serif;letter-spacing:.12em;box-shadow:0 8px 18px rgba(123,38,54,.18);transition:all .25s}
.welcome-get-started:hover{background:#541724;transform:translateY(-2px);box-shadow:0 12px 24px rgba(123,38,54,.23)}
.welcome-get-started i{color:#e3c66c}
.welcome-create-account{color:#7b2636;font:600 9px Poppins,sans-serif;letter-spacing:.08em;border-bottom:1px solid #d8bd83;padding:0 0 8px}
.welcome-create-account i{color:#b58a2b}
.welcome-trust-note{margin-top:34px;color:#887b73;font:300 10px/1.8 Poppins,sans-serif;letter-spacing:.02em}
.welcome-trust-note i{color:#b58a2b}
.welcome-luxe-visual{position:relative;align-self:stretch;min-height:610px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(145deg,#76283a 0%,#4a1421 58%,#2e1019 100%);border-radius:0 23px 23px 0}
.welcome-luxe-visual::before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle,rgba(239,208,140,.23),rgba(239,208,140,.07) 47%,transparent 70%);border:1px solid rgba(232,205,147,.23)}
.welcome-luxe-visual::after{content:"V";position:absolute;right:7%;top:4%;font:italic 300 220px/1 "Cormorant Garamond",serif;color:rgba(255,248,231,.045);pointer-events:none}
.welcome-perfume-bottle{position:relative;z-index:1;width:clamp(260px,30vw,390px);max-height:470px;object-fit:contain;filter:drop-shadow(0 28px 28px rgba(10,0,0,.35));transform:rotate(-5deg);transition:transform .5s ease}
.welcome-luxe-visual:hover .welcome-perfume-bottle{transform:rotate(-2deg) translateY(-5px)}
.welcome-orbit{width:340px;height:340px;border-color:rgba(229,201,137,.27)}
.welcome-orbit-one{transform:scaleX(.8) rotate(32deg)}.welcome-orbit-two{width:410px;height:410px;border-color:rgba(255,255,255,.12);transform:scaleX(.78) rotate(-30deg)}
.welcome-visual-label{top:12%;right:8%;color:#e4c477;font-size:8px;letter-spacing:.22em}
.welcome-visual-caption{bottom:9%;color:#f0dcae;font-size:8px;letter-spacing:.16em}
.welcome-visual-caption i{background:#d2b263}
.welcome-contact-link{left:clamp(32px,6vw,78px);bottom:25px;color:#8b7b73;font-size:9px}
.welcome-contact-link i{color:#a37a2b}
@media(max-width:760px){
 .account-page:has(.account-welcome-luxe){padding:24px 14px 38px}
 .account-welcome-luxe{grid-template-columns:1fr;min-height:0;border-radius:20px}
 .welcome-luxe-copy{padding:42px 28px 26px;max-width:none}
 .welcome-kicker{margin-bottom:24px}
 .welcome-luxe-copy h1{font-size:60px}
 .welcome-description{font-size:12px;max-width:480px}
 .welcome-luxe-visual{min-height:360px;border-radius:0 0 19px 19px}
 .welcome-perfume-bottle{width:270px;max-height:320px}
 .welcome-orbit{width:260px;height:260px}.welcome-orbit-two{width:310px;height:310px}
 .welcome-visual-label{top:9%;right:8%}.welcome-visual-caption{bottom:6%}
 .welcome-contact-link{left:28px;bottom:auto;top:calc(100% - 390px);color:#f2dcae}
 .welcome-trust-note{margin-top:24px}
}
@media(max-width:420px){
 .account-page:has(.account-welcome-luxe){padding:15px 10px 30px}
 .account-welcome-luxe::before{inset:7px}
 .welcome-luxe-copy{padding:35px 22px 24px}
 .welcome-kicker{font-size:8px;letter-spacing:.13em;padding:8px 11px}
 .welcome-luxe-copy h1{font-size:52px}
 .welcome-description{line-height:1.9}
 .welcome-luxe-actions{align-items:stretch;flex-direction:column;gap:17px}
 .welcome-get-started{width:100%}.welcome-create-account{align-self:flex-start}
 .welcome-luxe-visual{min-height:305px}
 .welcome-perfume-bottle{width:235px;max-height:275px}
 .welcome-orbit{width:220px;height:220px}.welcome-orbit-two{width:265px;height:265px}
 .welcome-visual-label{font-size:7px}.welcome-visual-caption{font-size:7px;gap:7px}
 .welcome-contact-link{left:22px;top:calc(100% - 330px);font-size:8px}
}

/* VAIL vertical welcome page — monochrome fragrance editorial, approved concept */
.account-page:has(.welcome-vertical){
  min-height:calc(100vh - 80px);padding:28px 16px 48px;box-sizing:border-box;
  background:linear-gradient(180deg,#fdfdfc 0%,#f5f5f2 100%);position:relative;overflow:hidden;
}
.account-page:has(.welcome-vertical)::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#111 0%,#c9a45c 48%,#111 100%);opacity:.9;
}
.account-page:has(.welcome-vertical) .section-container{width:100%;max-width:590px;margin:0 auto;position:relative;z-index:1}
.account-welcome-luxe.welcome-vertical{
  display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:590px;min-height:0;
  margin:0 auto;padding:0;background:#fff;border:1px solid rgba(0,0,0,.09);border-radius:28px;
  overflow:hidden;box-shadow:0 22px 65px rgba(0,0,0,.10);text-align:center;isolation:isolate;
}
.account-welcome-luxe.welcome-vertical::before{inset:10px;border:1px solid rgba(190,151,75,.28);border-radius:21px;z-index:5;pointer-events:none}
.welcome-vertical .welcome-art-panel{
  position:relative;display:block;width:100%;height:auto;min-height:0;aspect-ratio:780/805;overflow:hidden;
  margin:0;background:#fff;border-radius:0;flex:none;
}
.welcome-vertical .welcome-art-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 74%,rgba(255,255,255,.25));z-index:1;pointer-events:none}
.welcome-vertical .welcome-perfume-bottle{
  display:block;position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 47%;
  filter:none;transform:none;z-index:0;
}
.welcome-vertical .welcome-art-stamp{position:absolute;right:8%;bottom:8%;z-index:2;color:#d8b46b;font:500 8px Poppins,sans-serif;letter-spacing:.24em;writing-mode:vertical-rl;text-shadow:0 1px 5px rgba(0,0,0,.2)}
.welcome-vertical .welcome-luxe-copy{width:100%;max-width:none;box-sizing:border-box;align-self:stretch;padding:24px 38px 34px;background:#fff;color:#111;text-align:center}
.welcome-vertical .welcome-kicker{display:inline-flex;justify-content:center;align-items:center;gap:11px;margin:0 0 18px;padding:0;background:transparent;color:#8e6b2d;font:600 8px Poppins,sans-serif;letter-spacing:.22em}
.welcome-vertical .welcome-kicker span{display:inline-block;width:22px;height:1px;background:#c9a45c}
.welcome-vertical .welcome-overline{margin:0 0 7px;color:#686868;font:500 8px Poppins,sans-serif;letter-spacing:.27em}
.welcome-vertical .welcome-luxe-copy h1{margin:0 0 8px;color:#111;font:500 clamp(46px,8vw,66px)/.9 "Cormorant Garamond",serif;letter-spacing:-.045em}
.welcome-vertical .welcome-luxe-copy h1 em{display:inline-block;margin-top:7px;color:#111;font-weight:600;font-style:normal;letter-spacing:.05em}
.welcome-vertical .welcome-description{max-width:410px;margin:15px auto 23px;color:#626262;font:300 11px/1.95 Poppins,sans-serif}
.welcome-vertical .welcome-luxe-actions{display:flex;flex-direction:column;align-items:center;gap:15px}
.welcome-vertical .welcome-get-started{width:min(100%,330px);min-height:52px;padding:0 26px;border:1px solid #c9a45c;border-radius:999px;background:#090909;color:#f8e7bd;box-shadow:0 10px 22px rgba(0,0,0,.13);font:500 10px Poppins,sans-serif;letter-spacing:.24em}
.welcome-vertical .welcome-get-started:hover{background:#292929;transform:translateY(-2px)}
.welcome-vertical .welcome-get-started i{color:#d9b56a;font-size:14px}
.welcome-vertical .welcome-create-account{padding:0 0 5px;border-bottom:1px solid #c9a45c;color:#222;font:500 9px Poppins,sans-serif;letter-spacing:.12em}
.welcome-vertical .welcome-create-account i{color:#a8823e}
.welcome-vertical .welcome-trust-note{justify-content:center;margin-top:21px;color:#777;font:300 9px Poppins,sans-serif;letter-spacing:.03em}
.welcome-vertical .welcome-trust-note i{color:#a8823e}
.welcome-vertical .welcome-contact-link{position:static;display:inline-flex;justify-content:center;align-items:center;margin:21px auto 0;color:#777;font:300 8px Poppins,sans-serif;letter-spacing:.03em}
.welcome-vertical .welcome-contact-link i{color:#a8823e;margin-right:7px}
@media(max-width:560px){
 .account-page:has(.welcome-vertical){padding:10px 9px 24px;min-height:calc(100vh - 65px)}
 .account-welcome-luxe.welcome-vertical{border-radius:22px}
 .account-welcome-luxe.welcome-vertical::before{inset:7px;border-radius:16px}
 .welcome-vertical .welcome-luxe-copy{padding:20px 23px 27px}
 .welcome-vertical .welcome-kicker{font-size:7px;letter-spacing:.17em;margin-bottom:15px}
 .welcome-vertical .welcome-luxe-copy h1{font-size:54px}
 .welcome-vertical .welcome-description{font-size:10px;line-height:1.9;margin:13px auto 20px}
 .welcome-vertical .welcome-get-started{width:100%;min-height:50px}
 .welcome-vertical .welcome-art-stamp{font-size:6px;letter-spacing:.17em}
}
@media(prefers-reduced-motion:reduce){.welcome-vertical *{transition:none!important;animation:none!important}}

/* VAIL welcome page — medium compact sizing refinement */
.account-page:has(.welcome-vertical) {
  padding: 24px 16px 38px;
}
.account-page:has(.welcome-vertical) .section-container {
  max-width: 480px;
}
.account-welcome-luxe.welcome-vertical {
  width: 100%;
  min-height: 0;
  border-radius: 22px;
}
.welcome-vertical .welcome-art-panel {
  min-height: 0;
  height: 285px;
  border-radius: 21px 21px 0 0;
}
.welcome-vertical .welcome-perfume-bottle {
  width: min(100%, 310px);
  max-height: 270px;
}
.welcome-vertical .welcome-luxe-copy {
  padding: 22px 30px 27px;
}
.welcome-vertical .welcome-kicker {
  margin-bottom: 13px;
}
.welcome-vertical .welcome-overline {
  margin-bottom: 5px;
}
.welcome-vertical .welcome-luxe-copy h1 {
  font-size: 52px;
  margin-bottom: 6px;
}
.welcome-vertical .welcome-description {
  max-width: 370px;
  margin: 11px auto 17px;
  font-size: 10px;
  line-height: 1.8;
}
.welcome-vertical .welcome-get-started {
  min-height: 46px;
}
.welcome-vertical .welcome-trust-note {
  margin-top: 15px;
}
.welcome-vertical .welcome-contact-link {
  margin-top: 13px;
}
@media (max-width: 560px) {
  .account-page:has(.welcome-vertical) {
    padding: 14px 10px 25px;
  }
  .account-welcome-luxe.welcome-vertical {
    border-radius: 19px;
  }
  .welcome-vertical .welcome-art-panel {
    height: 245px;
    min-height: 0;
    border-radius: 18px 18px 0 0;
  }
  .welcome-vertical .welcome-perfume-bottle {
    width: min(100%, 260px);
    max-height: 230px;
  }
  .welcome-vertical .welcome-luxe-copy {
    padding: 19px 22px 23px;
  }
  .welcome-vertical .welcome-luxe-copy h1 {
    font-size: 47px;
  }
  .welcome-vertical .welcome-description {
    font-size: 10px;
    margin: 10px auto 16px;
  }
  .welcome-vertical .welcome-get-started {
    min-height: 45px;
  }
  .welcome-vertical .welcome-trust-note {
    margin-top: 14px;
  }
}


/* VAIL welcome page — centered horizontally and vertically */
.account-page:has(.welcome-vertical) {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}
.account-page:has(.welcome-vertical) > .section-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
@media (max-width: 560px) {
  .account-page:has(.welcome-vertical) {
    min-height: calc(100vh - 64px);
    padding: 18px 10px;
  }
}

/* Notify Me When Available on the product page */
.btn-detail-add-cart.is-notify { background: #121212; color: #fff; cursor: pointer; pointer-events: auto; opacity: 1; }
.btn-detail-add-cart.is-notify:hover { background: #c9a227; color: #121212; }