/* ============================================
   ZAWAYA - Black Edition Product Page Styles
   ============================================
   
   Conditional styles applied when product belongs 
   to the "black-edition" category.
   
   The parent class .zawaya-black-edition is added 
   to the product wrapper automatically via
   single-product.php template.
   
   These styles work alongside the existing
   zawaya-single-product.css (light theme).
   
   ============================================ */


/* ═══════════════════════════════════════════════════════
   BLACK EDITION: Dark Wrapper
   Wraps: Story 1 → Ingredients → Story 2 → 
          Perfumer's Words → Scent Line
   into ONE continuous black block
   ═══════════════════════════════════════════════════════ */

.zawaya-be-dark-wrapper {
    background-color: #000000;
    color: #ffffff;
    width: 100%;
    overflow: visible;
}


/* ═══════════════════════════════════════════════════════
   BLACK EDITION: Section Titles
   Mirrors .zawaya-section-title but in white
   — Title always sits ABOVE the section content
   ═══════════════════════════════════════════════════════ */

.zawaya-be-section-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 6px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    margin: 0 0 50px 0;
    padding: 0;
    display: block;
    width: 100%;
}


/* ═══════════════════════════════════════════════════════
   BLACK EDITION: Scented Story — First (L'HISTOIRE PARFUMÉE)
   Title sits ABOVE the image/video banner
   Padding: top only (bottom belongs to the banner itself)
   ═══════════════════════════════════════════════════════ */

/* Title that appears above the banner image */
.zawaya-be-scented-story--first .zawaya-be-section-title {
    font-family: 'Open Sans', sans-serif;
    padding: 100px 20px 50px;
    margin: 0;
    display: block;
    width: 100%;
    text-align: center;
}

.zawaya-be-scented-story {
    padding: 100px 0;
}

/* First story: no top padding — title already provides it */
.zawaya-be-scented-story--first {
    padding: 0;
}

/* Inner container: same max-width as main .zawaya-container */
.zawaya-be-scented-story__content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.zawaya-be-scented-story__text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.5px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    max-width: 900px;
    margin: 0 auto;
    white-space: pre-wrap;
}

.zawaya-be-scented-story__text p {
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin-bottom: 16px;
}

.zawaya-be-scented-story__text p:last-child {
    margin-bottom: 0;
}

.zawaya-be-scented-story__subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 26px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 2.5px;
    text-align: center;
    color: #ffffff;
    margin: 0 0 24px 0;
}

/* Second scented story: same structure, centered */
.zawaya-be-scented-story--second .zawaya-be-scented-story__content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: auto;
}

.zawaya-be-scented-story--second .zawaya-be-scented-story__text {
    max-width: 900px;
    width: 100%;
    text-align: center;
}


/* ═══════════════════════════════════════════════════════
   BLACK EDITION: Scented Story — Image Banner
   Mirrors normal .zawaya-scented-story__banner
   ═══════════════════════════════════════════════════════ */

.zawaya-be-scented-story__banner {
    position: relative;
    width: 100%;
    height: 600px;
    min-height: 600px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
}

/* Dark overlay — mirrors normal .zawaya-scented-story__overlay background */
.zawaya-be-scented-story__banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

/* Subtitle + text — sits above the dark tint */
.zawaya-be-scented-story__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 48px 80px;
}


/* ═══════════════════════════════════════════════════════
   BLACK EDITION: Scented Story — Video variant
   Mirrors normal .zawaya-scented-story__banner--video
   ═══════════════════════════════════════════════════════ */

.zawaya-be-scented-story__banner--video {
    position: relative;
    width: 100%;
    height: 600px;
    min-height: 600px;
    overflow: hidden;
}

.zawaya-be-scented-story__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Dark overlay */
.zawaya-be-scented-story__banner--video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Text content above overlay */
.zawaya-be-scented-story__banner--video .zawaya-be-scented-story__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 48px 20px;
}


/* ═══════════════════════════════════════════════════════
   BLACK EDITION: Ingredients
   Mirrors .zawaya-ingredients layout — 3 centered columns
   white text, no divider lines
   ═══════════════════════════════════════════════════════ */

.zawaya-be-ingredients {
    padding: 80px 0;
}

.zawaya-be-ingredients__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.zawaya-be-ingredients__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.zawaya-be-ingredients__label {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 15px 0;
}

/* Thin white divider line — mirrors the normal gray one */
.zawaya-be-ingredients__divider {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    margin: 0 auto;
}

.zawaya-be-ingredients__notes {
    display: flex;
    flex-direction: column;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.75);
}

.zawaya-be-ingredients__notes span {
    display: block;
}


/* ═══════════════════════════════════════════════════════
   BLACK EDITION: Perfumer's Words
   Mirrors .zawaya-perfumer-words — centered, white text
   ═══════════════════════════════════════════════════════ */

.zawaya-be-perfumer-words {
    padding: 80px 0;
}

.zawaya-be-perfumer-words__quote {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    border: none;
}

.zawaya-be-perfumer-words__quote p {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.8;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════
   BLACK EDITION: Scent Line
   Full-width image at bottom of dark block
   Mirrors .zawaya-scent-line
   ═══════════════════════════════════════════════════════ */

.zawaya-be-scent-line {
    padding: 80px 0 0;
}

.zawaya-be-scent-line .zawaya-be-section-title {
    margin-bottom: 40px;
}

.zawaya-be-scent-line__banner {
    width: 100%;
    overflow: hidden;
}

.zawaya-be-scent-line__banner img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


/* ═══════════════════════════════════════════════════════
   BLACK EDITION: Hero Button Overrides
   - Add-to-cart: #202020, 4px radius (sharper)
   - Graving: white bg, outlined, 4px radius
   - Size buttons: square corners (0 radius)
   ═══════════════════════════════════════════════════════ */

.zawaya-black-edition .zawaya-btn--add-to-cart,
.zawaya-black-edition .zawaya-product__actions .single_add_to_cart_button {
    background: #202020 !important;
    border-color: #202020 !important;
    border-radius: 4px !important;
}

.zawaya-black-edition .zawaya-btn--add-to-cart:hover,
.zawaya-black-edition .zawaya-product__actions .single_add_to_cart_button:hover {
    background: #333333 !important;
    border-color: #333333 !important;
}

.zawaya-black-edition .zawaya-btn--graving {
    background: #ffffff;
    color: #202020;
    border: 1px solid #202020;
    border-radius: 4px !important;
}

.zawaya-black-edition .zawaya-btn--graving:hover {
    background: #f5f5f5;
}

.zawaya-black-edition .zawaya-size-btn {
    border-radius: 0;
}

.zawaya-black-edition .zawaya-size-btn.active {
    background: #000000;
    border-color: #000000;
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE: Tablet (max-width: 992px)
   Mirrors main CSS breakpoint
   ═══════════════════════════════════════════════════════ */

@media (max-width: 992px) {

    .zawaya-be-scented-story {
        padding: 60px 0;
    }

    .zawaya-be-scented-story--first {
        padding: 0;
    }

    .zawaya-be-scented-story--first .zawaya-be-section-title {
        padding: 60px 20px 30px;
    }

    .zawaya-be-section-title {
        font-size: 20px;
        letter-spacing: 4px;
        margin-bottom: 30px;
    }

    .zawaya-be-scented-story__banner {
        height: 400px;
        min-height: 400px;
    }

    .zawaya-be-scented-story__inner {
        padding: 30px;
    }

    .zawaya-be-scented-story__banner--video {
        height: 400px;
        min-height: 400px;
    }

    .zawaya-be-ingredients__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .zawaya-be-perfumer-words {
        padding: 60px 0;
    }

    .zawaya-be-scent-line {
        padding: 60px 0 0;
    }
}


/* ═══════════════════════════════════════════════════════
   RESPONSIVE: Mobile (max-width: 640px)
   Mirrors main CSS breakpoint
   ═══════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    .zawaya-be-scented-story,
    .zawaya-be-ingredients,
    .zawaya-be-perfumer-words,
    .zawaya-be-scent-line {
        padding: 60px 0;
    }

    .zawaya-be-scented-story--first {
        padding: 0;
    }

    .zawaya-be-scented-story--first .zawaya-be-section-title {
        padding: 60px 20px 30px;
    }

    .zawaya-be-scent-line {
        padding-bottom: 0;
    }

    .zawaya-be-section-title {
        font-size: 16px;
        letter-spacing: 3px;
        margin-bottom: 30px;
    }

    .zawaya-be-scented-story__subtitle {
        font-size: 18px;
    }

    .zawaya-be-scented-story__text {
        font-size: 12px;
        line-height: 1.9;
    }

    .zawaya-be-scented-story__banner {
        height: 380px;
        min-height: 380px;
    }

    .zawaya-be-scented-story__inner {
        padding: 32px 24px;
    }

    .zawaya-be-scented-story__banner--video {
        height: 380px;
        min-height: 380px;
    }

    .zawaya-be-scented-story__banner--video .zawaya-be-scented-story__inner {
        padding: 32px 24px;
    }

    .zawaya-be-ingredients__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .zawaya-be-ingredients__label {
        font-size: 18px;
        letter-spacing: 4px;
    }

    .zawaya-be-perfumer-words__quote p {
        font-size: 16px;
    }
}