/* ==========================================
   1. WOOSTIFY CONTAINER RESET (HOME PAGE)
========================================== */
.home #content.site-content > .woostify-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}
.home #content.site-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================
   2. GLOBAL LAYOUT & TYPOGRAPHY
========================================== */
.page-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}
.text-center { text-align: center; }
.section-spacing { padding: 80px 0; }
.h2, h2.section-header__title { 
    font-size: 32px; 
    font-weight: 400; 
    letter-spacing: 0.05em; 
    margin-bottom: 30px; 
    text-transform: none; 
    color: #100d0d;
}

/* শুধুমাত্র হোমপেজের ভেতরের বাটন (হেডারের বাটন বা অন্য পেজে ইফেক্ট পড়বে না) */
.dune-home-wrapper .btn {
    background: #2a2a28;
    color: #fff;
    padding: 15px 30px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 13px;
    display: inline-block;
    border: none;
    border-radius: 0;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.dune-home-wrapper .btn:hover { opacity: 0.8; color: #fff; }

.dune-home-wrapper .btn--secondary {
    background: transparent;
    color: #2a2a28;
    border: 1px solid #2a2a28;
}

/* ==========================================
   3. HERO SECTION (NO TRANSPARENT HEADER OFFSET)
========================================== */
.dune-hero-section { 
    position: relative; 
    height: 80vh; /* হেডারের নিচে নরমাল ব্যানার সাইজ */
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.dune-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center top; z-index: 1; }
.dune-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.18; z-index: 2; }
.dune-hero-content { position: relative; z-index: 3; color: #fff; }
.dune-hero-content .hero-top-subtitle { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 15px; }
.dune-hero-content .hero-title { font-size: 60px; font-weight: 400; margin-bottom: 20px; letter-spacing: 0.02em; line-height: 1.2; color: #fff;}
.dune-hero-content .hero-subtitle { font-size: 18px; margin-bottom: 30px; }

/* ==========================================
   4. WOOCOMMERCE GRID (DUNE STYLE)
========================================== */
.dune-home-wrapper .woocommerce ul.products,
.dune-categories .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 30px !important; }
.dune-home-wrapper .woocommerce ul.products li.product,
.dune-categories .woocommerce ul.products li.product-category { width: 100% !important; margin: 0 !important; text-align: left !important; }
.dune-home-wrapper .woocommerce ul.products li.product a img,
.dune-categories .woocommerce ul.products li.product-category a img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0 !important; width: 100%; margin-bottom: 15px; }
.dune-home-wrapper .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; font-weight: 400 !important; color: #100d0d !important; margin-bottom: 5px !important; padding: 0 !important; line-height: 1.4; }
.dune-home-wrapper .woocommerce ul.products li.product .price { color: #100d0d !important; font-size: 14px !important; font-weight: 400 !important; }

/* ==========================================
   5. PROMO GRID (50/50 SPLIT)
========================================== */
.dune-promo-grid .flex-grid { display: flex; flex-wrap: wrap; gap: 30px;}
.dune-promo-grid .flex-grid__item { flex: 0 0 calc(50% - 15px); min-height: 600px; background-size: cover; background-position: center; position: relative; display: flex; }
.promo-grid__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%); z-index: 1;}
.promo-content { position: relative; z-index: 2; padding: 60px; width: 100%; color: #fff;}
.promo-content .h2 { color: #fff !important; margin-bottom: 10px; }
.align-bottom-left { align-items: flex-start; justify-content: flex-end; display: flex; flex-direction: column; text-align: left; }
.align-center { align-items: center; justify-content: center; display: flex; flex-direction: column; text-align: center; }

/* ==========================================
   SHOP THE LOOK SECTION (SPLIT LAYOUT)
========================================== */
.shop-look-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
}

.shop-look-image-col {
    position: relative;
    flex: 0 0 60%;
}

.shop-look-product-col {
    flex: 0 0 calc(40% - 50px);
    display: flex;
    justify-content: center;
}

/* লুকবুক প্রোডাক্ট কার্ড স্টাইল (শপিপাইর মতো ক্লিন লুক) */
.dune-look-card {
    background: #fdfdfd;
    border: 1px solid #eaeaea;
    padding: 30px;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}
.dune-look-card:hover {
    transform: translateY(-5px);
}

.look-card-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-bottom: 20px;
}

.look-card-title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
}
.look-card-title a {
    color: #100d0d;
    text-decoration: none;
}

.look-card-price {
    font-size: 15px;
    color: #100d0d;
    margin-bottom: 15px;
}
.look-card-price ins {
    text-decoration: none;
    font-weight: 600;
}

/* মোবাইল রেস্পন্সিভ */
@media (max-width: 782px) {
    .shop-look-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    .shop-look-image-col, 
    .shop-look-product-col {
        flex: 0 0 100%;
        width: 100%;
    }
    .dune-look-card {
        max-width: 100%;
    }
}


/* ==========================================
   SPECIFIC CATEGORY SECTION STYLES
========================================== */
.dune-specific-category-section .section-subtitle {
    font-size: 15px;
    letter-spacing: 0.02em;
}

.dune-specific-category-section .view-all-btn {
    margin-top: 40px;
}

/* ==========================================
   6. SHOPPABLE LOOKBOOK (HOTSPOTS)
========================================== */
/*.lookbook-container { position: relative; display: inline-block; width: 100%; }*/
/*.lookbook-main-image { width: 100%; display: block; object-fit: cover; }*/
/*.hotspot-dot { position: absolute; width: 14px; height: 14px; background-color: #fff; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); z-index: 5; }*/
/*.hotspot-pulse { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; animation: dunePulse 2s infinite; z-index: -1; }*/
/*@keyframes dunePulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }*/
/*.hotspot-popup { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); background: #fff; padding: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); width: 200px; text-align: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }*/
/*.hotspot-dot:hover .hotspot-popup { opacity: 1; visibility: visible; top: 20px; }*/
/*.hotspot-popup .popup-title { font-size: 14px; font-weight: 600; color: #100d0d; margin-bottom: 5px; }*/
/*.hotspot-popup .popup-price { font-size: 13px; color: #666; margin-bottom: 10px; }*/
/*.hotspot-popup .popup-link { font-size: 12px; color: #100d0d; text-decoration: underline; text-transform: uppercase; }*/

/* ==========================================
   7. PARALLAX IMAGE SECTION
========================================== */
.dune-parallax-section { position: relative; height: 700px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; }
.parallax-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.15; }
.parallax-content { position: relative; z-index: 2; width: 100%; }
.parallax-text-box { max-width: 500px; color: #fff; }
.parallax-text-box .h5 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; color: #fff;}
.parallax-text-box .subtext { font-size: 16px; margin-bottom: 30px; line-height: 1.6; }



/* ==========================================
   6-GRID MODELS SECTION STYLES
========================================== */
.dune-models-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ৩ কলামের সুন্দর গ্রিড */
    gap: 25px;
}

.model-grid__item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4; /* মডেল ছবির জন্য পারফেক্ট পোর্ট্রেট রেশিও */
    background-color: #f4f4f4;
}

.model-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* হোভার করলে হালকা জুম ইফেক্ট */
.model-grid__item:hover img {
    transform: scale(1.05);
}

/* ছবির ওপর হোভার ওভারলে ও টেক্সট */
.model-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%);
    display: flex;
    align-items: flex-end;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.model-grid__item:hover .model-overlay {
    opacity: 1;
}

.model-overlay span {
    color: #fff;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 400;
}

/* মোবাইল রেস্পন্সিভ */
@media (max-width: 782px) {
    .dune-models-grid {
        grid-template-columns: repeat(2, 1fr); /* মোবাইলে ২ কলাম হয়ে যাবে */
        gap: 15px;
    }
    .model-overlay {
        opacity: 1; /* মোবাইলে হোভারের ঝামেলা এড়াতে ওভারলে হালকা দৃশ্যমান রাখা যায় অথবা প্যাডিং কমানো যায় */
        padding: 15px;
        background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 40%);
    }
    .model-overlay span {
        font-size: 12px;
    }
}


/* ==========================================
   8. COUNTDOWN TIMER SECTION
========================================== */
.dune-countdown-section {
    background-color: #c7b8a1; 
    padding: 60px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.dune-countdown-text { flex: 1; min-width: 300px; color: #100d0d; }
.dune-countdown-text h2 { font-size: 40px; margin-bottom: 10px; font-weight: 400; color: #100d0d !important;}
.dune-countdown-text p { font-size: 16px; margin: 0;}
.dune-countdown-timer { display: flex; gap: 30px; text-align: center; }
.dune-countdown-timer .time-block h2 { font-size: 45px; font-weight: 300; margin: 0; line-height: 1; color: #100d0d !important; }
.dune-countdown-timer .time-block span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #100d0d; }

/* ==========================================
   9. LOGO BAR SECTION
========================================== */
.logo-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; opacity: 0.5; transition: opacity 0.3s ease; }
.logo-grid:hover { opacity: 0.8; }
.logo-grid .flex-grid__item { flex: 1; text-align: center; padding: 10px; }
.logo-grid img { max-width: 120px; height: auto; }

/* ==========================================
   10. RESPONSIVE DESIGN (MOBILE)
========================================== */
@media (max-width: 782px) {
    .dune-hero-section { height: 400px; }
    .dune-promo-grid .flex-grid__item { flex: 0 0 100%; min-height: 400px; }
    .dune-home-wrapper .woocommerce ul.products, .dune-categories .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; }
    .dune-parallax-section { height: 500px; background-attachment: scroll; }
    .dune-countdown-section { flex-direction: column; text-align: center; gap: 30px; }
    .logo-grid .flex-grid__item { flex: 0 0 33.33%; margin-bottom: 20px; }
    .dune-hero-content .hero-title { font-size: 40px !important; }
    .section-spacing { padding: 40px 0; }
}