@font-face {
    font-family: "StoryKeeper Campaign Lato";
    src: url("lato-bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

.skbn-frame {
    box-sizing: border-box;
    container-type: inline-size;
    width: min(calc(100% - 32px), 1440px);
    margin: 12px auto 0;
}
.skbn-frame--home {
    /* Match the content edges inside the theme's .hero__inner. */
    --skbn-hero-gutter: clamp(var(--space-3, 1rem), 4vw, 3.75rem);
    --skbn-book-height: clamp(74px, 7.2cqi, 108px);
    width: calc(min(100%, var(--container-width-wide, 1440px)) - 2 * var(--skbn-hero-gutter));
}
.skbn-banner {
    position: relative;
    display: grid;
    align-items: center;
    gap: clamp(12px, 2cqi, 30px);
    padding: clamp(12px, 1.2cqi, 18px);
    border-radius: 12px;
    background: var(--color-grey-1, #2c301f);
    color: var(--color-cream, #fffefa);
}
.skbn-banner::before {
    position: absolute;
    inset: 6px;
    border: 1px solid #b99c65;
    border-radius: 8px;
    pointer-events: none;
    content: "";
}
.skbn-banner__identity {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.25cqi, 19px);
    min-width: 0;
}
.skbn-gift {
    display: block;
    flex: 0 0 auto;
    width: clamp(19px, 4.2cqi, 61px);
    aspect-ratio: 1;
    background: var(--color-orange-dark, #d88c23);
    mask: url("../../themes/storykeeper/assets/icons/gift.svg") center / contain no-repeat;
}
.skbn-banner__title {
    margin: 0;
    font: 700 clamp(22px, 5.3cqi, 84px)/.98 var(--font-family-heading, Georgia, serif);
    translate: 0 .06em;
    white-space: nowrap;
}
.skbn-banner__offer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    color: #efc68a;
    font: 700 clamp(14px, 1.75cqi, 25px)/1.2 "StoryKeeper Campaign Lato", var(--font-family-base, sans-serif);
    font-synthesis: none;
}
.skbn-frame--home .skbn-banner {
    grid-template-columns: auto minmax(0, 1fr) calc(var(--skbn-book-height) * 1.9);
    padding: clamp(9px, 1cqi, 14px) clamp(12px, 1.2cqi, 18px);
}
.skbn-frame--home .skbn-gift {
    /* Align the icon with the visible serif letters inside the title line box. */
    translate: 0 -11%;
}
.skbn-frame--home .skbn-banner__offer {
    padding-inline-start: clamp(12px, 1.7cqi, 25px);
    border-inline-start: 1px solid #b99c6588;
}
.skbn-banner__art {
    height: var(--skbn-book-height);
    border-radius: 9px;
    overflow: hidden;
}
.skbn-banner__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 57% 50%;
}
.skbn-frame--checkout {
    width: min(calc(100% - 32px), 1080px);
    margin: 10px auto 0;
}
.skbn-frame--checkout .skbn-banner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(4px, 1.5cqi, 19px);
    min-height: 50px;
    padding: 7px clamp(8px, 2cqi, 20px);
}
.skbn-frame--checkout .skbn-banner::before { inset: 4px; }
.skbn-frame--checkout .skbn-gift { width: clamp(12px, 3.5cqi, 24px); }
.skbn-frame--checkout .skbn-banner__title {
    font-size: clamp(16px, 5cqi, 26px);
    translate: 0 .14em;
}
.skbn-frame--checkout .skbn-banner__offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(4px, 1.5cqi, 19px);
    font-size: clamp(11px, 3.1cqi, 15px);
    text-align: center;
    text-wrap: balance;
}
.skbn-banner__limit { white-space: nowrap; }
.skbn-product-offer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid #d5b176;
    border-radius: 8px;
    background: #fff6e8;
    color: #2c301f;
    font: 700 15px/1.4 "StoryKeeper Campaign Lato", var(--font-family-base, sans-serif);
}
.skbn-product-offer .skbn-gift { width: 26px; }

@container (max-width: 650px) {
    .skbn-frame--home .skbn-banner {
        grid-template-columns: minmax(0, 1fr) clamp(54px, 19cqi, 88px);
        grid-template-areas: "identity art" "offer art";
        align-content: center;
        row-gap: 5px;
        column-gap: clamp(9px, 3.2cqi, 18px);
        padding: 14px clamp(14px, 5cqi, 24px);
    }
    .skbn-frame--home .skbn-banner__identity {
        grid-area: identity;
        gap: clamp(5px, 2cqi, 10px);
    }
    .skbn-frame--home .skbn-gift { width: clamp(17px, 5.8cqi, 28px); }
    .skbn-frame--home .skbn-banner__title {
        font-size: clamp(22px, 9.2cqi, 46px);
        line-height: 1.06;
    }
    .skbn-frame--home .skbn-banner__offer {
        grid-area: offer;
        gap: 3px;
        padding-inline-start: 0;
        border: 0;
        font-size: clamp(13px, 4.35cqi, 19px);
    }
    .skbn-frame--home .skbn-banner__limit {
        color: #f4e6ce;
        font-size: .88em;
    }
    .skbn-frame--home .skbn-banner__art {
        grid-area: art;
        height: clamp(72px, 23cqi, 92px);
        border-radius: 7px;
    }
}
@container (max-width: 310px) {
    .skbn-frame--checkout .skbn-banner { gap: 3px; padding-inline: 7px; }
    .skbn-frame--checkout .skbn-banner__identity, .skbn-frame--checkout .skbn-banner__offer { gap: 3px; }
}