/* The Gift Atelier thin banner from the shop (Shopify theme: snippets/gift-promo-card.liquid,
   assets/gift-promo.css, sections/gift-promo-banner.liquid in sticky mode) on the home page,
   right under the hero (inc/gift-promo-banner.php). In the flow; once scrolled up to the fixed header
   it sticks under it (06.11.2026): the wrapper keeps its place and height, the inner banner turns fixed
   (a hand-made sticky — #app is overflow: hidden, so position: sticky would not hold). No padding (user, 05.11.2026). */
.gift-promo-sticky {
    position: relative;
    z-index: 40; /* under the fixed header (50) */
    padding: 0;
    background: #fff;
    line-height: 0;
}

.gift-promo-sticky__inner {
    background: #fff;
    line-height: 0;
}

.gift-promo-sticky--stuck .gift-promo-sticky__inner {
    position: fixed;
    top: var(--gps-top, 0px);
    left: 0;
    right: 0;
    z-index: 40;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.gift-promo {
    /* the home banner (05.11.2026): beige picture, products on the left, text in #93061D */
    --gp-gold: #93061d;
    --gp-wine: #edd9c3;
    /* the share of the banner taken by the picture's products (the text sits to the right of it) */
    --gp-picture: 32%;
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    line-height: 0;
    container-type: inline-size;
}

.gift-promo__hit {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--gp-wine);
    color: var(--gp-gold);
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    text-decoration: none !important;
    transition: box-shadow 0.25s ease;
}

.gift-promo__hit:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.gift-promo__hit:focus-visible {
    outline: 2px solid var(--gp-gold);
    outline-offset: 2px;
}

.gift-promo__img {
    display: block;
    width: 100%;
    height: auto;
}

/* the two lines, centred in the red part of the picture */
.gift-promo__copy {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--gp-picture);
    text-wrap: balance;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 38%;
    padding: 4% 3% 4% 0;
    box-sizing: border-box;
}

.gift-promo__title,
.gift-promo__text {
    display: block;
    font-family: 'Libre Baskerville', 'Baskerville', serif;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--gp-gold);
    text-decoration: none;
}

/* the text grows with the picture (cqw = 1% of the banner's width) */
.gift-promo__title {
    font-size: max(12px, 2cqw);
    line-height: 1.25;
    letter-spacing: 0.06em;
}

.gift-promo__text {
    font-style: italic;
    font-size: max(9px, 1cqw);
    line-height: 1.3;
    letter-spacing: 0.1em;
    opacity: 0.95;
    margin-top: 10px;
    border: 1px solid;
    padding: 5px 10px;
}

/* Phones: the mobile picture (img/gift-promo-banner-mobile.png, 728x150) — the products take ~59%
   of the width, so the two lines sit in the right 41% and are set smaller. */
@media (max-width: 767px) {
    .gift-promo-sticky {
        margin-top: 30px;
    }
    .gift-promo {
        --gp-picture: 59%;
    }

    .gift-promo__copy {
        gap: 7%;
        padding: 3% 2.5% 3% 0;
    }

    .gift-promo__title {
        font-size: max(10px, 2.9cqw);
        line-height: 1.15;
        letter-spacing: 0.03em;
    }

    .gift-promo__text {
        font-size: max(7.5px, 1.7cqw);
        line-height: 1.2;
        letter-spacing: 0.06em;
    }
}