/* ============================================
   YD CLOTHING — MAIN STYLESHEET
   ============================================ */

/* --- CSS Variables --- */
:root {
    --yd-cream: #f5f1eb;
    --yd-warm-white: #faf8f5;
    --yd-sand: #c8b89a;
    --yd-gold: #b89a6a;
    --yd-dark: #1a1a1a;
    --yd-dark-2: #2d2d2d;
    --yd-mid: #6b6b6b;
    --yd-light-border: #e8e0d5;
    --yd-font-display:'Gilda Display', serif;
    --yd-font-body: 'Barlow', sans-serif;
    --nav-height: 80px;
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.gold-background {
    background-color: #020202;

    /*!* Layered radial gradients mimic the mottled depth *!*/
    /*background-image: radial-gradient(ellipse at 20% 30%,*/
    /*rgba(220, 175, 60, 0.55) 0%, transparent 55%),*/
    /*radial-gradient(ellipse at 75% 20%,*/
    /*    rgba(190, 145, 30, 0.45) 0%, transparent 50%),*/
    /*radial-gradient(ellipse at 50% 80%,*/
    /*    rgba(140, 100, 15, 0.40) 0%, transparent 55%),*/
    /*radial-gradient(ellipse at 85% 70%,*/
    /*    rgba(210, 165, 50, 0.50) 0%, transparent 45%),*/
    /*url("./noise.svg");*/

    background-blend-mode: normal, normal, normal, normal, overlay;
}


img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: var(--transition); }

.py-6 { padding-top: 5rem; padding-bottom: 5rem; }
.bg-warm { background: var(--yd-cream); }



/* ============================================
   NAVBAR
   ============================================ */
.yd-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(250, 248, 245, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--yd-light-border);
    transition: var(--transition);
}

.yd-navbar.scrolled {
    background: rgba(250, 248, 245, 0.99);
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}


.navbar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-text {
    font-family: var(--yd-font-display);
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--yd-dark);
    line-height: 1;
}

.logo-sub {
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    color: var(--yd-mid);
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 2px;
}



/* Nav Icons */
.nav-icons { display: flex; align-items: center; gap: 1rem; }
.nav-icon {
    font-size: 1.1rem;
    color: #aa8453;
    position: relative;
    transition: color var(--transition);
}
.nav-icon:hover { color: var(--yd-gold); }
.cart-badge {
    position: absolute;
    top: -6px; right: -8px;
    background: var(--yd-gold);
    color: white;
    font-size: 0.6rem;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 500;
}
.cart-badge:empty, .cart-badge:contains('0') { display: none; }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}
.hamburger span {
    display: block;
    width: 22px; height: 1.5px;
    background: var(--yd-dark);
    transition: var(--transition);
}


/* ============================================
   CATEGORIES STRIP
   ============================================ */
.categories-strip { margin-top: 0; }

.category-card {
    display: block;
    position: relative;
    overflow: hidden;
    height: 420px;
    cursor: pointer;
}

.category-img {
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    background-color: #d0cbc4;
}
/* Fallback colors for categories */
.category-card:nth-child(2) .category-img { background-color: #c5c0b8; }
.category-card:nth-child(3) .category-img { background-color: #bab5ac; }

.category-card:hover .category-img { transform: scale(1.04); }

.category-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 1.2rem;
    font-family: var(--yd-font-display);
    letter-spacing: 0.05em;
}

/* ============================================
   MARQUEE
   ============================================ */
.marquee-banner {
    background: var(--yd-dark);
    overflow: hidden;
    padding: 0.85rem 0;
    white-space: nowrap;
}
.marquee-track {
    display: inline-flex;
    gap: 3rem;
    animation: marquee 25s linear infinite;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}
.marquee-dot { color: var(--yd-gold); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-eyebrow {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--yd-gold);
    margin-bottom: 0.6rem;
    font-weight: 400;
}

.section-title {
    font-family: var(--yd-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--yd-dark);
    line-height: 1.1;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
}

/* ============================================
   PRODUCT CARDS
   ============================================ */
.product-card { cursor: pointer; }

.product-image-wrap {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    background: var(--yd-cream);
}

.product-image {
    width: 100%;
    aspect-ratio: 3/4;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}
.product-card:hover .product-image { transform: scale(1.04); }

.placeholder-img { background: var(--yd-cream); }

.product-badges {
    position: absolute;
    top: 1rem; left: 1rem;
    display: flex; flex-direction: column; gap: 0.3rem;
}

.badge-new, .badge-sale, .badge-bestseller {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    font-weight: 400;
}
.badge-new { background: var(--yd-dark); color: white; }
.badge-sale { background: #c0392b; color: white; }
.badge-bestseller { background: var(--yd-gold); color: white; }

.product-actions {
    position: absolute;
    bottom: 1rem; right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(10px);
    transition: var(--transition);
}
.product-card:hover .product-actions { opacity: 1; transform: translateX(0); }

.action-btn {
    width: 36px; height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--yd-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: var(--transition);
}
.action-btn:hover { background: var(--yd-gold); color: white; }

.product-info { padding: 0 0.25rem; }

.product-category {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--yd-mid);
    display: block;
    margin-bottom: 0.3rem;
}

.product-name {
    font-family: var(--yd-font-display);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--yd-dark);
    margin-bottom: 0.5rem;
    transition: color var(--transition);
}
.product-card:hover .product-name { color: var(--yd-gold); }

.product-price { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.price-current { font-size: 0.9rem; font-weight: 400; color: var(--yd-dark); }
.price-old { font-size: 0.8rem; color: var(--yd-mid); text-decoration: line-through; }

.product-colors { display: flex; gap: 6px; }
.color-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform var(--transition);
}
.color-dot:hover { transform: scale(1.2); }

/* ============================================
   BRAND STORY
   ============================================ */
.brand-story { padding: 0; }
.story-image {
    height: 100%;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-color: #d0cbc4;
    position: relative;
}
.story-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.1);
}
.story-content {
    padding: 4rem 5rem;
    max-width: 540px;
}
.story-title {
    font-family: var(--yd-font-display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    margin-bottom: 1.5rem;
}
.story-text {
    color: var(--yd-mid);
    margin-bottom: 1rem;
    line-height: 1.8;
}

/* ============================================
   LOOKBOOK PROMO
   ============================================ */
.lookbook-promo { }
.lookbook-bg {
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-color: #2d2520;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lookbook-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.lookbook-content {
    position: relative;
    z-index: 1;
    padding: 4rem 2rem;
    color: white;
}
.lookbook-title {
    font-family: var(--yd-font-display);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 300;
    color: white;
    line-height: 1.1;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonial-card {
    background: var(--yd-cream);
    padding: 2.5rem;
    border: 1px solid var(--yd-light-border);
    transition: var(--transition);
}
.testimonial-card:hover { border-color: var(--yd-gold); }
.testimonial-card.featured {
    background: var(--yd-dark);
    border-color: var(--yd-dark);
}
.testimonial-card.featured .testimonial-text { color: rgba(255,255,255,0.8); }
.testimonial-card.featured .stars { color: var(--yd-gold); }
.testimonial-card.featured strong { color: white; }
.testimonial-card.featured span { color: rgba(255,255,255,0.5); }

.stars { color: var(--yd-gold); font-size: 1rem; margin-bottom: 1rem; display: block; }
.testimonial-text {
    font-style: italic;
    font-family: var(--yd-font-display);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--yd-mid);
    margin-bottom: 1.5rem;
}
.testimonial-author { display: flex; align-items: center; gap: 1rem; }
.author-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--yd-sand);
    opacity: 0.6;
}
.testimonial-author span { display: block; font-size: 0.75rem; color: var(--yd-mid); margin-top: 2px; }

/* ============================================
   INSTAGRAM FEED
   ============================================ */
.instagram-feed { padding: 5rem 0 0; }
.ig-header { padding: 0 2rem; }
.ig-sub { font-size: 0.85rem; color: var(--yd-mid); }
.ig-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 2rem;
}
.ig-item { position: relative; overflow: hidden; aspect-ratio: 1; }
.ig-placeholder { width: 100%; height: 100%; }
.ig-hover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-size: 1.5rem;
    opacity: 0;
    transition: var(--transition);
}
.ig-item:hover .ig-hover { opacity: 1; }

/* ============================================
   NEWSLETTER
   ============================================ */
.newsletter-section {
    background: var(--yd-dark);
    padding: 5rem 2rem;
    text-align: center;
}
.newsletter-title {
    font-family: var(--yd-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    color: white;
    margin-bottom: 0.75rem;
}
.newsletter-sub { color: rgba(255,255,255,0.6); margin-bottom: 2rem; }
.newsletter-form {
    display: flex;
    max-width: 480px;
    margin: 0 auto 1rem;
    gap: 0;
}
.newsletter-form input {
    flex: 1;
    padding: 0.9rem 1.5rem;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: white;
    font-family: var(--yd-font-body);
    font-size: 0.85rem;
    outline: none;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-privacy { font-size: 0.72rem; color: rgba(255,255,255,0.4); }

/* Footer newsletter */
.footer-newsletter { display: flex; gap: 0; margin-top: 1rem; }
.footer-newsletter input {
    flex: 1;
    padding: 0.7rem 1rem;
    border: 1px solid var(--yd-light-border);
    background: transparent;
    font-size: 0.8rem;
    font-family: var(--yd-font-body);
    outline: none;
    color: var(--yd-dark);
}
.footer-newsletter button {
    padding: 0.7rem 1rem;
    background: var(--yd-gold);
    border: none;
    color: white;
    cursor: pointer;
    transition: var(--transition);
}
.footer-newsletter button:hover { background: var(--yd-dark); }


/* ============================================
   PAGE HEADER SLIM
   ============================================ */
.page-header-slim {
    padding: calc(var(--nav-height) + 2rem) 0 2rem;
    border-bottom: 1px solid var(--yd-light-border);
}
.page-title-slim {
    font-family: var(--yd-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    margin-top: 0.5rem;
}

/* Breadcrumb */
.yd-breadcrumb { font-size: 0.72rem; letter-spacing: 0.08em; }
.yd-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: '–'; color: var(--yd-mid); }
.yd-breadcrumb a { color: var(--yd-mid); }
.yd-breadcrumb a:hover { color: var(--yd-gold); }
.yd-breadcrumb .active { color: var(--yd-dark); }

/* ============================================
   SHOP PAGE
   ============================================ */
.shop-sidebar {
    position: sticky;
    top: calc(var(--nav-height) + 1rem);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--yd-light-border);
    margin-bottom: 1.5rem;
}
.sidebar-header h5 {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
}
.clear-filters {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--yd-mid);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition);
}
.clear-filters:hover { color: var(--yd-gold); }

.filter-group { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--yd-light-border); }
.filter-title {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 500;
}
.filter-options { display: flex; flex-direction: column; gap: 0.5rem; }
.filter-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--yd-mid);
    cursor: pointer;
    transition: color var(--transition);
}
.filter-check:hover { color: var(--yd-dark); }
.filter-check input { accent-color: var(--yd-gold); }
.filter-count { margin-left: auto; font-size: 0.75rem; }

.size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.size-btn {
    padding: 0.5rem;
    border: 1px solid var(--yd-light-border);
    background: transparent;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition);
}
.size-btn:hover, .size-btn.active { background: var(--yd-dark); color: white; border-color: var(--yd-dark); }

.color-filter-grid { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.color-filter-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
}
.color-filter-dot.active, .color-filter-dot:hover { border-color: var(--yd-gold); transform: scale(1.1); }

.price-range { width: 100%; accent-color: var(--yd-gold); }
.price-range-labels { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--yd-mid); margin-top: 0.5rem; }

/* Toolbar */
.shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--yd-light-border);
}
.result-count { font-size: 0.82rem; color: var(--yd-mid); margin: 0; }
.toolbar-right { display: flex; align-items: center; gap: 1rem; }
.view-toggle { display: flex; gap: 0.25rem; }
.view-btn {
    background: none;
    border: 1px solid var(--yd-light-border);
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--yd-mid);
    transition: var(--transition);
}
.view-btn.active, .view-btn:hover { background: var(--yd-dark); color: white; border-color: var(--yd-dark); }
.sort-select {
    font-family: var(--yd-font-body);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    padding: 0.45rem 1rem;
    border: 1px solid var(--yd-light-border);
    background: transparent;
    color: var(--yd-dark);
    outline: none;
    cursor: pointer;
}

/* Pagination */
.pagination-wrap { display: flex; justify-content: center; }
.yd-pagination .page-link {
    font-family: var(--yd-font-body);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--yd-dark);
    border-color: var(--yd-light-border);
    padding: 0.6rem 1rem;
    transition: var(--transition);
    background: transparent;
}
.yd-pagination .page-item.active .page-link { background: var(--yd-dark); border-color: var(--yd-dark); color: white; }
.yd-pagination .page-link:hover { background: var(--yd-gold); border-color: var(--yd-gold); color: white; }

/* ============================================
   PRODUCT DETAIL
   ============================================ */
.product-detail { padding-top: calc(var(--nav-height) + 1rem); }

.product-gallery { display: flex; gap: 1rem; }
.gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 80px;
}
.thumb {
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition);
    overflow: hidden;
}
.thumb.active { border-color: var(--yd-gold); }
.thumb-img { aspect-ratio: 1; background-size: cover; }
.gallery-main { flex: 1; position: relative; }
.main-img { width: 100%; aspect-ratio: 3/4; background-size: cover; background-position: center; }
.gallery-zoom {
    position: absolute;
    top: 1rem; right: 1rem;
    background: white;
    border: 1px solid var(--yd-light-border);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: var(--yd-dark);
    transition: var(--transition);
}
.gallery-zoom:hover { background: var(--yd-gold); color: white; border-color: var(--yd-gold); }

.pd-category {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--yd-gold);
    display: block;
    margin-bottom: 0.5rem;
}
.pd-name {
    font-family: var(--yd-font-display);
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 400;
    margin-bottom: 0.75rem;
}
.pd-rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.rating-count { font-size: 0.78rem; color: var(--yd-mid); }
.pd-price { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.price-main { font-size: 1.6rem; font-family: var(--yd-font-display); color: var(--yd-dark); }
.price-save {
    font-size: 0.72rem;
    background: #f0e8d8;
    color: var(--yd-gold);
    padding: 3px 8px;
    letter-spacing: 0.05em;
}
.pd-description { color: var(--yd-mid); line-height: 1.8; margin-bottom: 2rem; font-size: 0.9rem; }

.pd-option { margin-bottom: 1.5rem; }
.option-label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.75rem; }
.size-guide-link { font-size: 0.72rem; color: var(--yd-mid); text-decoration: underline; }

.pd-colors { display: flex; gap: 0.75rem; }
.pd-color-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
}
.pd-color-btn.active { border-color: var(--yd-gold); outline: 2px solid var(--yd-gold); outline-offset: 2px; }

.pd-sizes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pd-size-btn {
    min-width: 52px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--yd-light-border);
    background: transparent;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--yd-font-body);
}
.pd-size-btn:hover, .pd-size-btn.active { background: var(--yd-dark); color: white; border-color: var(--yd-dark); }

.quantity-control { display: flex; align-items: center; border: 1px solid var(--yd-light-border); width: fit-content; }
.qty-btn {
    width: 44px; height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition);
}
.qty-btn:hover { background: var(--yd-cream); }
.qty-input {
    width: 52px;
    height: 44px;
    border: none;
    border-left: 1px solid var(--yd-light-border);
    border-right: 1px solid var(--yd-light-border);
    text-align: center;
    font-family: var(--yd-font-body);
    font-size: 0.9rem;
    background: transparent;
    outline: none;
}

.pd-ctas { display: flex; flex-direction: column; gap: 0.75rem; margin: 2rem 0; }
.wishlist-btn { width: 100%; justify-content: center; }

.trust-signals { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.trust-item { font-size: 0.72rem; color: var(--yd-mid); display: flex; align-items: center; gap: 0.4rem; }
.trust-item i { color: var(--yd-gold); }

/* Accordion */
.yd-accordion-item { border: none; border-bottom: 1px solid var(--yd-light-border); background: transparent; }
.yd-accordion-btn {
    background: transparent;
    font-family: var(--yd-font-body);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--yd-dark);
    box-shadow: none !important;
    padding: 1.2rem 0;
}
.yd-accordion-btn:not(.collapsed) { color: var(--yd-gold); background: transparent; }
.yd-accordion-body { padding: 0 0 1.25rem; font-size: 0.85rem; color: var(--yd-mid); }
.yd-accordion-body ul { padding-left: 1.2rem; }
.yd-accordion-body li { margin-bottom: 0.4rem; }

/* Reviews */
.review-card {
    padding: 2rem;
    border: 1px solid var(--yd-light-border);
    background: var(--yd-cream);
}
.review-stars { color: var(--yd-gold); margin-bottom: 0.75rem; }
.review-text { font-style: italic; font-family: var(--yd-font-display); color: var(--yd-mid); margin-bottom: 1rem; line-height: 1.6; }
.review-meta strong { display: block; font-size: 0.85rem; font-weight: 500; }
.review-meta span { font-size: 0.72rem; color: var(--yd-mid); }

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-hero { }
.about-hero-bg {
    min-height: 70vh;
    background-size: cover;
    background-position: center;
    background-color: #2d2520;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--nav-height);
}
.about-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.about-hero-content { position: relative; z-index: 1; padding: 4rem 2rem; }
.about-hero-title {
    font-family: var(--yd-font-display);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 300;
    color: white;
    line-height: 1.05;
}
.about-hero-title em { font-style: italic; color: var(--yd-sand); }
.about-lead { font-size: 1.05rem; color: var(--yd-mid); line-height: 1.8; }

.value-card { padding: 2.5rem 1.5rem; }
.value-icon { font-size: 2rem; color: var(--yd-gold); margin-bottom: 1rem; }
.value-title { font-family: var(--yd-font-display); font-size: 1.3rem; margin-bottom: 0.75rem; }
.value-desc { font-size: 0.85rem; color: var(--yd-mid); line-height: 1.8; }

.team-avatar { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 1.25rem; }
.team-name { font-family: var(--yd-font-display); font-size: 1.3rem; margin-bottom: 0.25rem; }
.team-role { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yd-mid); }

.about-stats { }
.stats-bg {
    background: var(--yd-dark);
    padding: 4rem 2rem;
}
.stat-number {
    font-family: var(--yd-font-display);
    font-size: 3.5rem;
    color: var(--yd-gold);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.stat-label { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-info { padding-right: 2rem; }
.contact-intro { color: var(--yd-mid); margin-bottom: 2rem; }
.contact-details { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-detail-item { display: flex; gap: 1rem; align-items: flex-start; }
.cd-icon { font-size: 1.2rem; color: var(--yd-gold); margin-top: 2px; flex-shrink: 0; }
.contact-detail-item p { color: var(--yd-mid); font-size: 0.85rem; margin: 0.25rem 0 0; }
.contact-detail-item a { color: var(--yd-mid); }
.contact-detail-item a:hover { color: var(--yd-gold); }
.contact-socials { display: flex; gap: 1rem; }
.social-link { font-size: 1.2rem; color: var(--yd-mid); transition: color var(--transition); }
.social-link:hover { color: var(--yd-gold); }

.contact-form-wrap {
    background: var(--yd-cream);
    padding: 3rem;
    border: 1px solid var(--yd-light-border);
}
.yd-form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.yd-form-group label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; }
.yd-input {
    padding: 0.85rem 1rem;
    border: 1px solid var(--yd-light-border);
    background: white;
    font-family: var(--yd-font-body);
    font-size: 0.9rem;
    color: var(--yd-dark);
    outline: none;
    transition: border-color var(--transition);
    -webkit-appearance: none;
}
.yd-input:focus { border-color: var(--yd-gold); }
.yd-textarea { resize: vertical; min-height: 140px; }

.map-section { height: 350px; background: var(--yd-cream); }
.map-placeholder {
    height: 100%;
    background: #d8d4ce;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map-overlay-text { text-align: center; color: var(--yd-dark-2); }
.map-overlay-text i { font-size: 2rem; color: var(--yd-gold); display: block; margin-bottom: 0.5rem; }

/* Alert */
.yd-alert-success {
    padding: 1rem 1.25rem;
    background: #f0f8f0;
    border: 1px solid #a8d5a8;
    color: #2d7a2d;
    font-size: 0.88rem;
    display: flex; align-items: center;
}

/* ============================================
   LOOKBOOK PAGE
   ============================================ */
.lookbook-hero { }
.lookbook-hero-bg {
    min-height: 90vh;
    background-size: cover;
    background-position: center;
    background-color: #2a2520;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin-top: var(--nav-height);*/
}
.lookbook-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.lookbook-hero-content { position: relative; z-index: 1; padding: 4rem 2rem; }
.lookbook-hero-title {
    font-family: var(--yd-font-display);
    font-size: clamp(4rem, 9vw, 8rem);
    font-weight: 300;
    color: white;
    line-height: 1;
}
.lookbook-hero-sub { color: rgba(255,255,255,0.7); margin-top: 0.75rem; font-size: 1rem; letter-spacing: 0.05em; }

.look-full { }
.look-full-img {
    min-height: 70vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}
.look-label {
    position: absolute;
    left: 3rem; bottom: 3rem;
    color: white;
}
.look-label.right { left: auto; right: 3rem; text-align: right; }
.look-number { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--yd-sand); display: block; margin-bottom: 0.5rem; }
.look-title { font-family: var(--yd-font-display); font-size: 2.5rem; color: white; margin-bottom: 0.5rem; }
.look-items { font-size: 0.8rem; color: rgba(255,255,255,0.7); letter-spacing: 0.05em; margin-bottom: 1.5rem; }

.look-card { overflow: hidden; }
.look-img { background-size: cover; background-position: center; transition: transform 0.5s ease; }
.look-card:hover .look-img { transform: scale(1.03); }
.look-card-info { padding: 1.5rem 0; }
.look-shop-link { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yd-gold); display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .ig-grid { grid-template-columns: repeat(3, 1fr); }
    .story-content { padding: 3rem 2rem; max-width: 100%; }
    .navbar-inner { padding: 0 1.5rem; }
    .contact-info { padding-right: 0; }
}

@media (max-width: 767px) {
    :root { --nav-height: 64px; }
    .section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .newsletter-form { flex-direction: column; }
    .ig-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-actions { flex-direction: column; align-items: center; }
    .product-gallery { flex-direction: column-reverse; }
    .gallery-thumbs { flex-direction: row; width: 100%; }
    .contact-form-wrap { padding: 1.5rem; }
    .look-label, .look-label.right { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; text-align: left; }
    .hero-controls { bottom: 1.5rem; }
    .scroll-indicator { display: none; }
}