/* Autumn Theme — seasonal CSS decorations */

/* ============================================
   PAGE — keep decorations from causing h-scroll
   ============================================ */

main {
    overflow: clip;
}

/* ============================================
   HEADER — autumn leaves around the logo
   ============================================ */

/* NOTE: .header__logo is already `position: absolute; left: 50%` in the header
   styles (that is what centres it), so it must not be re-positioned here.
   In the Figma export the wordmark sits at 640,29 and measures 144x20 — the
   same as the live logo — so the offsets below are the mockup's own numbers. */

/* Maple leaf over the "I" plus two small leaves along the baseline */
.header__logo::before {
    content: '';
    position: absolute;
    left: 2px;
    top: -12px;
    width: 77px;
    height: 38px;
    background: url('img/logo-leaves.svg') no-repeat left top;
    background-size: contain;
    pointer-events: none;
}

/* Berry twig hanging off the right edge of the wordmark */
.header__logo::after {
    content: '';
    position: absolute;
    left: 126px;
    top: -14px;
    width: 70px;
    height: 38px;
    background: url('img/logo-twig.svg') no-repeat left top;
    background-size: contain;
    pointer-events: none;
}

/* ============================================
   FOOTER — gold branches at the right side
   ============================================ */

.footer {
    /* Clip sideways only: ::before deliberately reaches above the footer to
       straddle the benefits strip, the way the mockup has it. */
    overflow-x: clip;
    position: relative;
}

/* Pale leaf branch straddling the benefits strip and the footer, on the LEFT */
.footer::before {
    content: '';
    position: absolute;
    top: -113px;
    left: -40px;
    width: 175px;
    height: 189px;
    background: url('img/benefits-leaves.svg') no-repeat left top;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

.footer::after {
    content: '';
    position: absolute;
    top: 228px;
    right: -48px;
    width: 191px;
    height: 189px;
    background: url('img/footer-branch.svg') no-repeat right top;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   PRODUCT PAGE — leaves around "Додати в кошик"
   ============================================ */

/* Mockup: button at 750,480 (547x46), left foliage at 745,478 (166x65),
   right foliage at 1144,464 (165x67) — anchored to the button's own edges so
   it survives the wider button on the live page. */
.product-buttons__add-to-cart {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.product-buttons__add-to-cart::before,
.product-buttons__add-to-cart::after {
    content: '';
    position: absolute;
    width: 166px;
    height: 65px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}

.product-buttons__add-to-cart::before {
    left: -5px;
    top: -2px;
    background-image: url('img/btn-left.svg');
    background-position: left top;
}

.product-buttons__add-to-cart::after {
    right: -12px;
    top: -16px;
    width: 165px;
    height: 67px;
    background-image: url('img/btn-right.svg');
    background-position: right top;
}

/* ============================================
   CART — leaves around the two call-to-action buttons
   ============================================ */

/* Filled cart: mockup button at 841,664 (491x46), foliage at 838,671 (127x50)
   and 1216,665 (120x48). Empty cart: button at 581,342 (282x47), foliage at
   555,354 (87x35) and 801,346 (87x36). */
.order-summary-footer__submit,
.cart-empty__button {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.order-summary-footer__submit::before,
.order-summary-footer__submit::after,
.cart-empty__button::before,
.cart-empty__button::after {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}

.order-summary-footer__submit::before {
    left: -3px;
    top: 7px;
    width: 127px;
    height: 50px;
    background-image: url('img/cart-submit-left.svg');
    background-position: left top;
}

.order-summary-footer__submit::after {
    right: -4px;
    top: 1px;
    width: 120px;
    height: 48px;
    background-image: url('img/cart-submit-right.svg');
    background-position: right top;
}

/* The live "Продовжити покупки" button is 240px wide against the mockup's 282,
   so the foliage is scaled to the same share of the button (87/282) — at the
   mockup's own size it would crawl over the label. */
.cart-empty__button::before {
    left: -19px;
    top: 9px;
    width: 64px;
    height: 26px;
    background-image: url('img/cart-empty-btn-left.svg');
    background-position: left top;
}

.cart-empty__button::after {
    right: -18px;
    top: 3px;
    width: 64px;
    height: 26px;
    background-image: url('img/cart-empty-btn-right.svg');
    background-position: right top;
}

/* ============================================
   JS-inserted decorations — base styles
   ============================================ */

.autumn-decoration {
    position: absolute;
    pointer-events: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1199px) {
    .header__logo::before {
        left: 2px;
        top: -11px;
        width: 74px;
        height: 36px;
    }

    .header__logo::after {
        left: 121px;
        top: -13px;
        width: 67px;
        height: 36px;
    }

    .footer::after {
        right: -37px;
        width: 146px;
        height: 145px;
    }

    .footer::before {
        top: -64px;
        left: -30px;
        width: 133px;
        height: 144px;
    }
}

@media (max-width: 767px) {
    .header__logo::before {
        left: 2px;
        top: -10px;
        width: 63px;
        height: 31px;
    }

    .header__logo::after {
        left: 102px;
        top: -11px;
        width: 57px;
        height: 31px;
    }

    /* The 375px mockup has no foliage on the benefits/footer seam — it would
       collide with the benefits icons here. */
    .footer::before {
        display: none;
    }

    /* Instead, two small maple leaves sit by the footer wordmark (15,6591) */
    .footer__logo {
        position: relative;
    }

    .footer__logo::before {
        content: '';
        position: absolute;
        left: -2px;
        top: -6px;
        width: 37px;
        height: 49px;
        background: url('img/m-footer-logo-leaves.svg') no-repeat left top;
        background-size: contain;
        pointer-events: none;
    }

    .footer::after {
        top: 48%;
        right: -55px;
        width: 191px;
        height: 189px;
        background-image: url('img/m-footer-branch.svg');
    }

    /* Mockup: button at 16,749 (286x47), foliage at 7,759 and 227,751 (87x35) */
    .product-buttons__add-to-cart::before {
        left: -9px;
        top: 10px;
        width: 87px;
        height: 35px;
        background-image: url('img/m-btn-left.svg');
    }

    .product-buttons__add-to-cart::after {
        right: -12px;
        top: 2px;
        width: 87px;
        height: 36px;
        background-image: url('img/m-btn-right.svg');
    }

    /* Mockup: empty-cart button at 24,457 (328x47), foliage at 15,467 and
       274,462 (87x35) */
    /* Same story on mobile: mockup button 328px, live one 240px. */
    .cart-empty__button::before {
        left: -7px;
        top: 7px;
        width: 64px;
        height: 26px;
        background-image: url('img/m-cart-btn-left.svg');
    }

    .cart-empty__button::after {
        right: -7px;
        top: 4px;
        width: 64px;
        height: 26px;
        background-image: url('img/m-cart-btn-right.svg');
    }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .autumn-decoration {
        animation: none !important;
        transition: none !important;
    }
}