/* 
Haüs of Knefertiti
Luxury Design Foundation
Version 0.1
*/


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

html {
    scroll-behavior: smooth;
}



body {

    background:#0B0B0B;
    color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.6;

}



a {

    color:white;
    text-decoration:none;

}



.header {

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:25px 8%;

    border-bottom:1px solid rgba(201,162,39,.3);

}



.logo {

    font-size:1.5rem;
    font-weight:bold;
    color:#C9A227;

}



.navigation {

    display:flex;
    gap:25px;

}



.navigation a:hover {

    color:#C9A227;

}




.hero {

    min-height:80vh;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:40px;

}



.hero h1 {

    font-size:clamp(3rem,7vw,5rem);

    color:#FFFFFF;

    margin-bottom:20px;

}



.hero p {

    font-size:1.3rem;

    max-width:600px;

    margin:auto;

}



.gold-button {

    display:inline-block;

    margin-top:30px;

    padding:15px 35px;

    background:#C9A227;

    color:#000;

    font-weight:bold;

    border-radius:5px;

}



.gold-button:hover {

    opacity:.8;

}





.collections {

    padding:80px 8%;

    text-align:center;

}



.collections h2 {

    color:#C9A227;

    margin-bottom:40px;

}



.collection-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}




.collection-card {

    padding:40px 20px;

    border:1px solid rgba(201,162,39,.4);

    background:#111;

}



.collection-card h3 {

    color:#C9A227;

    margin-bottom:15px;

}




.welcome {

    padding:80px 10%;

    text-align:center;

}



.footer {

    text-align:center;

    padding:40px;

    border-top:1px solid rgba(201,162,39,.3);

}





@media(max-width:900px){


.menu-toggle {

display:block;

cursor:pointer;

}



.navigation {

display:none;

position:absolute;

top:85px;

right:20px;

background:#111;

padding:30px;

border:1px solid rgba(201,162,39,.4);

flex-direction:column;

z-index:1000;

}



.navigation.active {

display:flex;

}



}


.collection-grid {

    grid-template-columns:1fr;

}


.header {

    justify-content:center;

}


}
/* =====================================
Luxury Interior Updates
Haüs of Knefertiti v0.1 Part 2
===================================== */



body {

background:
linear-gradient(
180deg,
#0B0B0B 0%,
#111111 50%,
#050505 100%
);

}



.logo {

display:flex;

flex-direction:column;

}



.brand-name {

font-family:Georgia, serif;

font-size:1.8rem;

letter-spacing:1px;

}



.tagline {

font-size:.75rem;

color:#C9A227;

letter-spacing:3px;

text-transform:uppercase;

}





.hero {

background:

radial-gradient(
circle at center,
rgba(201,162,39,.15),
transparent 45%
);

}





.menu-toggle {

display:none;

background:none;

border:none;

color:white;

font-size:2rem;

}





.newsletter {

padding:80px 10%;

text-align:center;

background:#111;

}



.newsletter h2 {

color:#C9A227;

font-family:Georgia, serif;

font-size:2.5rem;

}



.newsletter form {

margin-top:30px;

display:flex;

justify-content:center;

gap:10px;

}



.newsletter input {

padding:15px;

width:300px;

border:none;

}



.newsletter button {

background:#C9A227;

border:none;

padding:15px 25px;

font-weight:bold;

}





.instagram {

padding:80px 10%;

text-align:center;

}



.instagram h2 {

font-family:Georgia, serif;

color:#C9A227;

}



.instagram-grid {

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-top:40px;

}



.instagram-grid div,
.instagram-grid a {

height:250px;

background:#1a1a1a;

border:1px solid rgba(201,162,39,.3);

display:flex;

align-items:center;

justify-content:center;

color:#C9A227;

text-decoration:none;

transition: border-color .25s ease, background-color .25s ease;

}

.instagram-grid a:hover {

border-color:#C9A227;

background:#222;

}





@media(max-width:900px){


.menu-toggle {

display:block;

}



.navigation {

display:none;

position:absolute;

top:90px;

right:20px;

background:#111;

padding:25px;

flex-direction:column;

}


.instagram-grid {

grid-template-columns:1fr 1fr;

}


.newsletter form {

flex-direction:column;

align-items:center;

}


}
/* =====================================
Signature Entrance
Haüs of Knefertiti v0.1 Part 3
===================================== */



.hero {

min-height:90vh;

background:

linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.85)
),

url("../images/hero/hero.jpg");

background-size:cover;

background-position:center;

}



.hero-overlay {

width:100%;

}



.eyebrow {

letter-spacing:5px;

font-size:.8rem;

color:#C9A227;

margin-bottom:20px;

}



.hero-content {

max-width:800px;

}



.featured {

padding:90px 8%;

text-align:center;

}



.featured h2 {

font-family:Georgia,serif;

font-size:3rem;

color:#C9A227;

}



.featured-grid {

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:50px;

}



.featured-card {

background:#111;

padding:50px 25px;

border:

1px solid rgba(201,162,39,.35);

transition:.3s;

}



.featured-card:hover {

transform:translateY(-10px);

}



.featured-card h3 {

color:#C9A227;

font-family:Georgia,serif;

}



.social-links {

display:flex;

justify-content:center;

gap:25px;

margin:25px;

}



.footer h3 {

font-family:Georgia,serif;

color:#C9A227;

}



@media(max-width:900px){


.featured-grid {

grid-template-columns:1fr;

}


}
/* =====================================
Luxury Motion Effects
Haüs of Knefertiti v0.1 Part 4
===================================== */



.hero-content {

animation: fadeEntrance 1.5s ease forwards;

}



.collection-card,
.featured-card {

transition:
transform .4s ease,
border-color .4s ease;

}



.collection-card:hover,
.featured-card:hover {

transform:translateY(-8px);

border-color:#C9A227;

}



.gold-button {

transition:
background .3s ease,
transform .3s ease;

}



.gold-button:hover {

transform:scale(1.05);

background:#FFFFFF;

}



@keyframes fadeEntrance {


from {

opacity:0;

transform:translateY(30px);

}


to {

opacity:1;

transform:translateY(0);

}


}
/* =====================================
Haüs Collection Room
v0.2 Part 3
===================================== */


.collection-hero {

padding:100px 10%;

text-align:center;

}



.collection-hero h1 {

font-family:Georgia, serif;

font-size:3.5rem;

color:#C9A227;

}



.filters {

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

padding:40px;

}



.filters button {

background:#111;

color:white;

border:1px solid #C9A227;

padding:12px 25px;

cursor:pointer;

}



.filters button:hover {

background:#1B8A8A;

color:#fff;

}



.product-grid {

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

padding:50px 8%;

}



.product-card {

background:#111;

border:1px solid rgba(201,162,39,.3);

overflow:hidden;

}



.product-image {

aspect-ratio:3 / 2;

background:#181818;

position:relative;

}



.product-image img {

width:100%;

height:100%;

object-fit:contain;

}



.product-info {

padding:25px;

}



.product-info h3 {

font-family:Georgia,serif;

color:#C9A227;

}



.collection-name {

text-transform:uppercase;

letter-spacing:2px;

font-size:.8rem;

}



.price {

font-size:1.4rem;

font-weight:bold;

}



.badge {

display:inline-block;

background:#C9A227;

color:#000;

padding:5px 12px;

font-size:.75rem;

font-weight:bold;

}



.badge-turquoise {

background:#1B8A8A;

color:#FFFFFF;

}



.fly-button {

margin-top:20px;

width:100%;

padding:15px;

background:#C9A227;

border:none;

font-weight:bold;

cursor:pointer;

}



@media(max-width:900px){

.product-grid {

grid-template-columns:1fr;

}

}
/* =====================================
Product Image Protection
Haüs of Knefertiti v0.2 Part 4
===================================== */


.product-image {

overflow:hidden;

background:#111;

}



.product-image img {

transition:transform .5s ease;

}



.product-card:hover .product-image img {

transform:scale(1.05);

}
/* =====================================
Fly Bag Luxury Navigation
v0.3 Part 2
===================================== */


.fly-bag-link {

color:#C9A227;

font-weight:bold;

}



#fly-count {

display:inline-flex;

justify-content:center;

align-items:center;

background:#C9A227;

color:#000;

width:22px;

height:22px;

border-radius:50%;

font-size:.75rem;

margin-left:5px;

}

/* =====================================
Fly Bag Luxury Experience
Haüs of Knefertiti
===================================== */

.cart-page {
    width: min(1180px, 92%);
    margin: 0 auto;
    padding: 80px 0 100px;
}

.cart-page > h1 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 4rem);
    letter-spacing: .02em;
    color: #FFFFFF;
}

.cart-page > p {
    max-width: 650px;
    margin: 14px 0 45px;
    color: rgba(255,255,255,.72);
    font-size: 1.05rem;
}


/* Individual Fly Bag Items */

.cart-item {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 34px;
    align-items: center;
    padding: 28px;
    margin-bottom: 20px;
    background: linear-gradient(
        145deg,
        #151515,
        #0D0D0D
    );
    border: 1px solid rgba(201,162,39,.25);
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.cart-item:hover {
    transform: translateY(-2px);
    border-color: rgba(201,162,39,.55);
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
}


/* Product Image Stage */

.cart-item-image {
    width: 210px;
    height: 165px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            #222 0%,
            #111 68%,
            #0B0B0B 100%
        );
    border: 1px solid rgba(201,162,39,.16);
    border-radius: 10px;
}

.cart-item-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
}


/* Product Details */

.cart-item-details {
    min-width: 0;
}

.cart-item-collection {
    margin: 0 0 6px;
    color: #35C7C7;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.cart-item-details h3 {
    margin: 0 0 12px;
    color: #FFFFFF;
    font-family: Georgia, serif;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.2;
}

.cart-item-color {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    color: rgba(255,255,255,.78);
    font-size: .92rem;
}

.cart-item-color span {
    color: #C9A227;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
}

.cart-item-price {
    margin: 0 0 20px;
    color: #C9A227;
    font-size: 1.15rem;
    font-weight: 700;
}


/* Quantity + Remove */

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.cart-quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(201,162,39,.4);
    border-radius: 999px;
    overflow: hidden;
    background: #0B0B0B;
}

.cart-quantity button {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: #C9A227;
    font-size: 1.25rem;
    cursor: pointer;
    transition:
        background-color .2s ease,
        color .2s ease;
}

.cart-quantity button:hover {
    background: #C9A227;
    color: #000;
}

.cart-quantity span {
    min-width: 34px;
    text-align: center;
    color: #FFFFFF;
    font-weight: 700;
}

.cart-remove {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.55);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition:
        color .2s ease;
}

.cart-remove:hover {
    color: #35C7C7;
}


/* Order Summary */

.cart-summary {
    max-width: 560px;
    margin: 45px 0 0 auto;
    padding: 32px;
    background:
        linear-gradient(
            145deg,
            #151515,
            #0D0D0D
        );
    border: 1px solid rgba(201,162,39,.4);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.cart-summary h2 {
    margin: 0 0 25px;
    color: #FFFFFF;
    font-family: Georgia, serif;
    font-size: 1.65rem;
}

.cart-summary p {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 12px 0;
    color: rgba(255,255,255,.72);
}

.cart-summary h3 {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(201,162,39,.25);
    color: #FFFFFF;
    font-size: 1.2rem;
}

.cart-summary .gold-button {
    width: 100%;
    box-sizing: border-box;
    margin-top: 28px;
    text-align: center;
    border: 1px solid #C9A227;
    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.cart-summary .gold-button:hover {
    background: #FFFFFF;
    color: #000;
    opacity: 1;
    transform: translateY(-1px);
}


/* Empty Fly Bag */

.cart-empty {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 70px 30px;
    text-align: center;
    background:
        radial-gradient(
            circle at center,
            rgba(201,162,39,.08),
            transparent 62%
        );
    border: 1px solid rgba(201,162,39,.18);
    border-radius: 14px;
}

.cart-empty-symbol {
    margin-bottom: 18px;
    color: #C9A227;
    font-size: 3rem;
}

.cart-empty h2 {
    margin: 0 0 12px;
    color: #FFFFFF;
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.cart-empty p {
    max-width: 560px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.7);
    line-height: 1.7;
}

.cart-empty .gold-button {
    margin-top: 0;
}


/* Mobile */

@media (max-width: 700px) {

    .cart-page {
        width: 90%;
        padding: 55px 0 70px;
    }

    .cart-item {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 20px;
    }

    .cart-item-image {
        width: 100%;
        height: 180px;
    }

    .cart-item-image img {
        padding: 12px;
    }

    .cart-item-actions {
        gap: 16px;
    }

    .cart-summary {
        max-width: none;
        margin-top: 30px;
        padding: 25px 20px;
    }

    .cart-empty {
        min-height: 350px;
        padding: 50px 22px;
    }

}

/* =====================================
Confirmation Pages
Haüs of Knefertiti v0.4
===================================== */


.confirmation-page {

min-height:70vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:40px;

}



.confirmation-page h1 {

font-family:Georgia, serif;

color:#C9A227;

font-size:3rem;

}



/* === Story Page Additions === */

.story-intro {

padding:90px 8%;

text-align:center;

}

.story-copy {

max-width:700px;

margin:0 auto 50px auto;

}

.story-copy p {

margin-bottom:20px;

line-height:1.7;

}

.image-placeholder {

background:linear-gradient(135deg,#0B0B0B,#111111,#050505);

border:1px solid rgba(201,162,39,.35);

display:flex;

align-items:center;

justify-content:center;

color:#666;

font-family:Georgia,serif;

font-style:italic;

letter-spacing:1px;

}

.large-image {

width:100%;

max-width:800px;

margin:0 auto;

height:400px;

}

.portrait-image {

height:450px;

width:100%;

}

.two-column-section {

padding:90px 8%;

}

.eyebrow.center {

text-align:center;

}

.two-column {

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

margin-top:40px;

}

.two-column.reverse {

direction:rtl;

}

.two-column.reverse > * {

direction:ltr;

}

.two-column-copy p {

margin-bottom:18px;

line-height:1.7;

}

.founder-signature {

font-family:Georgia,serif;

font-style:italic;

font-size:1.5rem;

color:#C9A227;

margin-top:20px;

}

.philosophy-intro {

text-align:center;

font-family:Georgia,serif;

font-style:italic;

color:#C9A227;

font-size:1.3rem;

margin-top:-20px;

margin-bottom:20px;

}

.philosophy-grid {

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

}

.fly-levels .collection-card p {

margin:15px 0 20px 0;

line-height:1.6;

font-size:.9rem;

}

.join-haus {

text-align:center;

padding:90px 8%;

}

.promise-copy {

max-width:650px;

margin:0 auto 20px auto;

line-height:1.7;

}

.shop-now-button {

display:inline-block;

margin-top:20px;

}

.tagline-close {

font-family:Georgia,serif;

font-style:italic;

color:#C9A227;

margin-top:30px;

}

@media(max-width:900px){

.two-column {

grid-template-columns:1fr;

}

.two-column.reverse {

direction:ltr;

}

.large-image {

height:280px;

}

.portrait-image {

height:320px;

}

}



/* === Form Status Messages === */

.form-status-message {

margin-top:15px;

font-size:.9rem;

}

.form-status-success {

color:#1B8A8A;

}

.form-status-error {

color:#C97227;

}



/* === Contact Page Additions === */

.contact-section {

padding:90px 8%;

}

.contact-grid {

display:grid;

grid-template-columns:1.2fr .8fr;

gap:60px;

}

.contact-form-block h2,
.contact-info-block h2 {

font-family:Georgia,serif;

color:#C9A227;

font-size:2rem;

margin-bottom:15px;

}

.contact-form-block p,
.contact-info-block p {

margin-bottom:25px;

line-height:1.7;

}

.contact-form {

display:flex;

flex-direction:column;

gap:6px;

}

.contact-form label {

font-size:.8rem;

letter-spacing:1px;

color:#999;

margin-top:12px;

}

.contact-form input,
.contact-form textarea {

background:#111;

border:1px solid rgba(201,162,39,.35);

color:#FFFFFF;

padding:14px;

font-family:Arial,Helvetica,sans-serif;

font-size:1rem;

}

.contact-form input:focus,
.contact-form textarea:focus {

outline:none;

border-color:#C9A227;

}

.contact-form textarea {

resize:vertical;

}

.contact-form button {

margin-top:20px;

align-self:flex-start;

}

.contact-info-block {

background:#111;

border:1px solid rgba(201,162,39,.35);

padding:40px;

height:fit-content;

}

.contact-email {

display:inline-block;

color:#C9A227;

font-family:Georgia,serif;

font-size:1.3rem;

text-decoration:none;

margin-bottom:10px;

}

.contact-email:hover {

text-decoration:underline;

}

.follow-heading {

margin-top:35px;

}

.contact-social {

justify-content:flex-start;

margin:20px 0 0 0;

}

@media(max-width:900px){

.contact-grid {

grid-template-columns:1fr;

}

}


/* === Fly Level Quiz === */

.quiz-section {

padding:80px 8%;

display:flex;

justify-content:center;

}

.quiz-container {

max-width:650px;

width:100%;

}

.quiz-progress-bar {

width:100%;

height:4px;

background:#222;

margin-bottom:30px;

}

.quiz-progress-fill {

height:100%;

background:#C9A227;

transition:width .3s;

}

.quiz-step-label {

text-align:center;

letter-spacing:2px;

font-size:.8rem;

color:#999;

margin-bottom:15px;

}

.quiz-question {

text-align:center;

font-family:Georgia,serif;

color:#FFFFFF;

font-size:1.8rem;

margin-bottom:40px;

}

.quiz-options {

display:flex;

flex-direction:column;

gap:15px;

}

.quiz-option {

display:flex;

align-items:center;

gap:15px;

background:#111;

border:1px solid rgba(201,162,39,.35);

color:#FFFFFF;

padding:20px;

text-align:left;

cursor:pointer;

font-size:1rem;

transition:.25s;

}

.quiz-option:hover {

border-color:#C9A227;

background:#1a1a1a;

transform:translateX(5px);

}

.quiz-option-letter {

font-family:Georgia,serif;

color:#C9A227;

font-weight:bold;

font-size:1.1rem;

min-width:20px;

}

.quiz-result {

text-align:center;

}

.quiz-result-title {

font-family:Georgia,serif;

color:#C9A227;

font-size:2.8rem;

margin-bottom:20px;

}

.quiz-result-description {

max-width:500px;

margin:0 auto 40px auto;

line-height:1.7;

}

.quiz-result-products-heading {

font-family:Georgia,serif;

color:#FFFFFF;

font-size:1.2rem;

letter-spacing:1px;

margin-bottom:20px;

}

.quiz-result-products {

display:flex;

flex-direction:column;

gap:10px;

max-width:400px;

margin:0 auto 40px auto;

}

.quiz-result-product {

display:flex;

justify-content:space-between;

border-bottom:1px solid rgba(201,162,39,.25);

padding:10px 5px;

}

.quiz-result-product-price {

color:#C9A227;

}

.quiz-shop-button {

display:inline-block;

margin-bottom:20px;

}

.quiz-retake-button {

display:block;

margin:0 auto;

background:none;

border:none;

color:#999;

text-decoration:underline;

cursor:pointer;

font-size:.9rem;

}

@media(max-width:600px){

.quiz-question {

font-size:1.4rem;

}

.quiz-result-title {

font-size:2rem;

}

}


/* === Event Registration Page === */

.event-section {

padding:90px 8%;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

}

.event-details-block {

background:#111;

border:1px solid rgba(201,162,39,.35);

padding:40px;

}

.event-meta {

margin-bottom:30px;

}

.event-meta-item {

margin-bottom:12px;

line-height:1.6;

}

.event-meta-item strong {

color:#C9A227;

font-family:Georgia,serif;

}

.capacity-note {

color:#999;

font-style:italic;

font-size:.9rem;

}

.event-description {

line-height:1.8;

}

.rsvp-block {

height:fit-content;

}

.rsvp-block h2 {

font-family:Georgia,serif;

color:#C9A227;

font-size:2rem;

margin-bottom:15px;

}

.rsvp-note {

margin-bottom:25px;

line-height:1.7;

color:#ccc;

}

.rsvp-form {

display:flex;

flex-direction:column;

gap:6px;

}

.rsvp-form label {

font-size:.8rem;

letter-spacing:1px;

color:#999;

margin-top:12px;

}

.rsvp-form input {

background:#111;

border:1px solid rgba(201,162,39,.35);

color:#FFFFFF;

padding:14px;

font-family:Arial,Helvetica,sans-serif;

font-size:1rem;

}

.rsvp-form input:focus {

outline:none;

border-color:#C9A227;

}

.rsvp-form button {

margin-top:20px;

align-self:flex-start;

}

@media(max-width:900px){

.event-section {

grid-template-columns:1fr;

}

}


/* === Story Page Real Photos === */

.story-photo {

width:100%;

height:100%;

object-fit:contain;

object-position:center;

display:block;

}


/* ---------------------------------------
EVENTS PAGE HERO
Permanent lifestyle image for Haus events.
Event details remain dynamic.
--------------------------------------- */

.event-hero {

  position:relative;

  min-height:75vh;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:40px;

  background-image:
    linear-gradient(
      rgba(0,0,0,.22),
      rgba(0,0,0,.42)
    ),
    url("../images/events/haus-events-hero.png");

  background-size:cover;

  background-position:center center;

  overflow:hidden;

}

.event-hero .hero-content {

  position:relative;

  z-index:2;

  max-width:900px;

  padding:40px 25px;

  text-shadow:
    0 2px 18px rgba(0,0,0,.55);

}

.event-hero h1 {

  color:#FFFFFF;

}

@media (max-width:700px) {

  .event-hero {

    min-height:70vh;

    background-position:center center;

    padding:25px;

  }

  .event-hero .hero-content {

    padding:25px 15px;

  }

}


/* ---------------------------------------
EVENTS PAGE REFINEMENT
Private Haüs invitation experience.
--------------------------------------- */

.event-section {

  padding:100px 30px 110px;

}

.event-details-block {

  max-width:900px;

  margin:0 auto;

}

.event-intro {

  max-width:720px;

  margin:0 auto 55px;

  text-align:center;

}

.event-intro h2 {

  margin-top:15px;

  line-height:1.15;

}

.event-meta {

  max-width:760px;

  margin:0 auto 55px;

  padding:35px 40px;

  border-top:1px solid rgba(201,162,39,.45);

  border-bottom:1px solid rgba(201,162,39,.45);

}

.event-meta-item {

  display:flex;

  justify-content:space-between;

  gap:30px;

  margin:0;

  padding:13px 0;

}

.event-meta-item strong {

  flex:0 0 110px;

  text-transform:uppercase;

  letter-spacing:.08em;

}

.event-meta-item span {

  text-align:right;

}

.capacity-note {

  justify-content:flex-end;

  font-size:.9rem;

  opacity:.75;

}

.event-description {

  max-width:760px;

  margin:0 auto;

  font-size:1.08rem;

  line-height:1.9;

  text-align:center;

}

.rsvp-block {

  max-width:560px;

  margin:100px auto 0;

  padding:55px 45px;

  text-align:center;

  border:1px solid rgba(201,162,39,.35);

}

.rsvp-block h2 {

  margin:12px 0 20px;

}

.rsvp-note {

  max-width:440px;

  margin:0 auto 35px;

  line-height:1.7;

}

.rsvp-form {

  text-align:left;

}

.rsvp-form label {

  display:block;

  margin:18px 0 8px;

}

.rsvp-form input {

  width:100%;

  box-sizing:border-box;

}

.rsvp-form .gold-button {

  width:100%;

  margin-top:25px;

}

.event-closing {

  padding:110px 30px;

  text-align:center;

}

.event-closing h2 {

  max-width:700px;

  margin:0 auto 20px;

}

.event-closing p {

  max-width:620px;

  margin:10px auto;

  line-height:1.8;

}

@media (max-width:700px) {

  .event-section {

    padding:70px 20px 80px;

  }

  .event-meta {

    padding:25px 20px;

  }

  .event-meta-item {

    display:block;

    padding:15px 0;

  }

  .event-meta-item strong,

  .event-meta-item span {

    display:block;

    text-align:left;

  }

  .event-meta-item strong {

    margin-bottom:5px;

  }

  .rsvp-block {

    margin-top:75px;

    padding:40px 25px;

  }

  .event-closing {

    padding:80px 25px;

  }

}


/* === Ambient Music Player === */

.music-notice {

text-align:center;

font-style:italic;

color:#999;

font-size:.9rem;

margin-bottom:15px;

}

.music-toggle {

display:inline-flex;

align-items:center;

gap:8px;

background:#111;

border:1px solid rgba(201,162,39,.4);

color:#C9A227;

padding:10px 20px;

font-family:Arial,Helvetica,sans-serif;

font-size:.85rem;

letter-spacing:.5px;

cursor:pointer;

transition:.25s;

margin:0 auto 40px auto;

display:flex;

}

.music-toggle:hover {

border-color:#C9A227;

background:#1a1a1a;

}

.music-toggle.music-playing {

border-color:#1B8A8A;

color:#1B8A8A;

}

.music-icon {

font-size:1rem;

}

.music-toggle-wrap {

display:flex;

justify-content:center;

}


/* ---------------------------------------
RSVP CONFIRMATION
Private Haüs guest arrival experience.
--------------------------------------- */

.rsvp-confirmation {

  max-width:560px;

  margin:0 auto;

  text-align:center;

}

.rsvp-confirmation h2 {

  margin:15px auto 22px;

  line-height:1.2;

}

.rsvp-confirmation-message {

  max-width:450px;

  margin:0 auto 35px;

  line-height:1.8;

}

.rsvp-confirmation-details {

  max-width:440px;

  margin:0 auto;

  padding:28px 25px;

  border-top:1px solid rgba(201,162,39,.35);

  border-bottom:1px solid rgba(201,162,39,.35);

}

.rsvp-confirmation-details p {

  margin:8px 0;

  line-height:1.6;

}

.rsvp-confirmation-details strong {

  font-size:1.08rem;

}

.rsvp-confirmation-closing {

  margin-top:30px;

  color:#C9A227;

  font-style:italic;

  letter-spacing:.04em;

}


/* =======================================
HAÜS STORY IMAGE FRAMES
Editorial presentation for Story photography.
======================================= */

.story-image-frame {
  position:relative;
  width:100%;
  height:auto;
  isolation:isolate;
}

.story-image-frame .story-photo {
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  object-fit:contain;
  object-position:center;
  background:#FFFFFF;
  border:1px solid rgba(201,162,39,.45);
  box-shadow:0 18px 35px rgba(0,0,0,.12);
}


/* Large lifestyle photograph */

.lifestyle-frame {
  max-width:800px;
  margin:0 auto;
}


/* Brand identity + Founder */

.identity-frame,
.founder-frame {
  width:100%;
}


/* Architectural frame behind the photograph */

.story-image-frame::before {
  content:"";
  position:absolute;
  z-index:0;
  top:14px;
  left:14px;
  width:100%;
  height:calc(100% - 14px);
  border:1px solid rgba(201,162,39,.30);
  pointer-events:none;
}


/* Founder receives the signature treatment */

.founder-frame::before {
  top:18px;
  left:18px;
  height:calc(100% - 18px);
  border-color:rgba(201,162,39,.55);
}


/* Mobile */

@media(max-width:900px) {

  .story-image-frame::before {
    top:8px;
    left:8px;
    height:calc(100% - 8px);
  }

  .founder-frame::before {
    top:10px;
    left:10px;
    height:calc(100% - 10px);
  }

}


/* =======================================
HAÜS HOMEPAGE BREATHING ROOM
Homepage editorial light-space treatment.
======================================= */

.welcome {
  background:#F7F4EE;
  color:#0B0B0B;
  padding:110px 10%;
}

.welcome h2,
.welcome h3 {
  color:#0B0B0B;
}

.welcome p {
  color:#333;
}

.newsletter {
  background:#F7F4EE;
  color:#0B0B0B;
  padding:100px 10%;
}

.newsletter h2 {
  color:#0B0B0B;
}

.newsletter p {
  color:#333;
}

.newsletter input {
  background:#FFFFFF;
  color:#0B0B0B;
  border:1px solid rgba(11,11,11,.18);
}

@media(max-width:700px) {

  .welcome {
    padding:75px 7%;
  }

  .newsletter {
    padding:75px 7%;
  }

}

/* =========================================
   Haüs Color Selector
   Fall Standard Variant UX
   ========================================= */

.color-selector {
    margin: 14px 0 18px;
}

.color-selector > p {
    margin: 0 0 8px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.color-option {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.22);
    background: #fff;
    color: #111 !important;
    border-radius: 999px;
    padding: 8px 14px;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.color-option:hover {
    transform: translateY(-1px);
    border-color: #b08d3c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.color-option:focus-visible {
    outline: 2px solid #b08d3c;
    outline-offset: 3px;
}

.color-option.selected {
    background: #111 !important;
    color: #fff !important;
    border-color: #b08d3c;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.color-option.selected::before {
    content: "✓ ";
    font-weight: 700;
}

@media (max-width: 600px) {
    .color-option {
        padding: 9px 13px;
    }

    .color-option:hover {
        transform: none;
    }
}

/* =========================================
   Haüs Active Navigation
   Current-page orientation treatment
   ========================================= */

.navigation a {
    position: relative;
    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.navigation a.active {
    color: #C9A227;
    font-weight: 600;
}

.navigation a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    background: #C9A227;
    transform: scaleX(1);
    transform-origin: center;
}

.navigation a:hover {
    color: #C9A227;
}

@media (max-width: 900px) {

    .navigation a.active::after {
        left: 0;
        right: auto;
        width: 28px;
        bottom: -3px;
    }

}

/* =====================================
   Haüs Logo Display
   Final proportional header treatment
   ===================================== */



@media (max-width: 1200px) {

}

@media (max-width: 900px) {

}

/* =====================================
   Haüs Logo Display
   Cropped brand-mark presentation
   ===================================== */

.logo img {
    display: block;
    width: 310px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 1200px) {
    .logo img {
        width: 275px;
    }
}

@media (max-width: 900px) {
    .logo img {
        width: min(250px, 62vw);
    }
}

.keep-shopping-wrap {
    margin: 18px 0 0;
    text-align: center;
}

.keep-shopping-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 12px 24px;
    box-sizing: border-box;
    border: 1px solid rgba(201,162,39,.65);
    border-radius: 5px;
    background: transparent;
    color: #FFFFFF;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.keep-shopping-link:hover {
    background: #C9A227;
    border-color: #C9A227;
    color: #000000;
    transform: translateY(-1px);
}

/* =========================================
   Shop by Category + Shop by Fly
   Two independent, combinable filter rows
   ========================================= */

.category-filters {
    padding-bottom: 10px;
}

.collection-filters {
    padding-top: 10px;
}

.filter-group-label {
    width: 100%;
    text-align: center;
    margin: 0 0 4px;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: .95rem;
    letter-spacing: .02em;
    color: rgba(255,255,255,.6);
}

.filters button.active {
    background: #C9A227;
    color: #000;
    border-color: #C9A227;
    font-weight: bold;
}

.filters button.active:hover {
    background: #1B8A8A;
    border-color: #1B8A8A;
    color: #fff;
}

/* Empty state when a filter combination has no live products yet */

.product-empty {
    grid-column: 1 / -1;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 30px;
    background:
        radial-gradient(
            circle at center,
            rgba(201,162,39,.08),
            transparent 62%
        );
    border: 1px solid rgba(201,162,39,.18);
    border-radius: 10px;
}

.product-empty p {
    max-width: 420px;
    margin: 0 auto;
    color: rgba(255,255,255,.65);
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* =========================================
   Homepage Fly Level cards as links
   The card is the whole click target
   ========================================= */

.collection-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

/* =========================================
   Follow The Haüs — Pinned Posts
   One embedded pinned post per platform
   ========================================= */

.pinned-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
    align-items: start;
}

.pinned-post-tile {
    background: #1a1a1a;
    border: 1px solid rgba(201,162,39,.3);
    border-radius: 6px;
    padding: 18px;
    overflow: hidden;
}

.pinned-post-label {
    margin: 0 0 14px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    color: #C9A227;
}

.pinned-post-tile iframe,
.pinned-post-tile blockquote {
    max-width: 100%;
}

@media(max-width:900px) {

    .pinned-posts-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   Homepage Fly Level cards — Explore CTA
   ========================================= */

.collection-card-cta {
    display: inline-block;
    margin-top: 4px;
    color: #C9A227;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform .25s ease;
}

.collection-card:hover .collection-card-cta {
    transform: translateX(4px);
}

/* =========================================
   Find Your Fly — the quiz-first homepage fork
   Don't know your level -> Discover (quiz)
   Already know -> Shop (jumps to the levels below)
   ========================================= */

.find-your-fly {
    padding: 90px 8%;
    text-align: center;
}

.find-your-fly h2 {
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: #C9A227;
}

.find-your-fly-intro {
    max-width: 520px;
    margin: 14px auto 50px;
    font-size: 1.1rem;
    color: rgba(255,255,255,.75);
}

.fork-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.fork-grid-single {
    grid-template-columns: 1fr;
    max-width: 440px;
}

.fork-card {
    background: #111;
    border: 1px solid rgba(201,162,39,.4);
    border-radius: 8px;
    padding: 45px 30px;
    transition:
        transform .3s ease,
        border-color .3s ease;
}

.fork-card:hover {
    transform: translateY(-6px);
    border-color: #C9A227;
}

.fork-eyebrow {
    margin: 0 0 14px;
    font-family: Georgia, serif;
    font-size: 1.3rem;
    color: #FFFFFF;
}

.fork-card > p:not(.fork-eyebrow):not(.fork-levels-list) {
    color: rgba(255,255,255,.72);
    margin-bottom: 25px;
}

.fork-levels-list {
    font-size: .85rem;
    letter-spacing: .04em;
    color: #1B8A8A;
    margin-bottom: 28px;
}

@media(max-width:900px) {

    .fork-grid {
        grid-template-columns: 1fr;
    }

}


/* ===== Policy pages (returns, privacy) ===== */

.policy-page {
max-width:760px;
margin:0 auto;
padding:90px 24px 70px;
}

.policy-page h1 {
margin-bottom:8px;
}

.policy-updated {
color:rgba(255,255,255,.6);
font-size:.9rem;
margin-bottom:36px;
}

.policy-lead {
font-size:1.1rem;
line-height:1.7;
margin-bottom:40px;
}

.policy-section {
padding:28px 0;
border-top:1px solid rgba(201,162,39,.3);
}

.policy-section h2 {
color:#C9A227;
font-size:1.25rem;
margin-bottom:14px;
}

.policy-section p,
.policy-section li {
line-height:1.7;
margin-bottom:12px;
}

.policy-section ul,
.policy-section ol {
padding-left:22px;
}

.footer-links a {
color:#C9A227;
}


/* ===== Fly Bag final-sale notice ===== */

.final-sale-notice {
border:1px solid rgba(201,162,39,.35);
padding:16px 18px;
margin:20px 0;
text-align:left;
font-size:.95rem;
line-height:1.6;
}

.final-sale-notice a {
color:#C9A227;
text-decoration:underline;
}

.final-sale-agree {
display:flex;
align-items:center;
gap:10px;
margin-top:12px;
cursor:pointer;
}

.final-sale-agree input {
width:18px;
height:18px;
accent-color:#C9A227;
}

.final-sale-error {
color:#F2B8B5;
margin-top:10px;
}

.cart-summary .final-sale-notice p {
display:block;
}

.cart-summary .final-sale-notice .final-sale-error {
color:#F2B8B5;
}


/* Product card: "The Piece / Styled" photo toggle */

.product-image img.is-styled{
  object-fit:contain;
}

.view-toggle{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  display:flex;
  gap:0;
  border:1px solid rgba(201,162,39,.6);
  border-radius:20px;
  overflow:hidden;
  background:rgba(11,11,11,.82);
}

.view-btn{
  background:transparent;
  color:#E6E6E6;
  border:0;
  padding:5px 12px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
}

.view-btn.selected{
  background:#C9A227;
  color:#0B0B0B;
  font-weight:bold;
}


/* Image guard: harder to drag, long-press save, or right-click search */

img{
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  user-select:none;
}

.product-image::after,
.cart-item-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

.cart-item-image{
  position:relative;
}

.view-toggle{
  z-index:2;
}


/* Bot check widget placement (contact, newsletter, RSVP) */

.bot-check{
  display:flex;
  justify-content:center;
  margin:14px 0;
}

.bot-check:empty{
  display:none;
}


/* Stock display */

.color-option.sold-out{
  opacity:.45;
  text-decoration:line-through;
  cursor:not-allowed;
}

.stock-note{
  margin:0 0 10px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#C9A227;
}

.stock-note:empty{
  display:none;
}

.fly-button:disabled{
  opacity:.5;
  cursor:not-allowed;
}


/* Footer legal line */

.footer-legal{
  max-width:640px;
  margin:8px auto 0;
  font-size:12px;
  line-height:1.6;
  opacity:.7;
}