/* Birthday Frame 1.0.8: transparent exterior clearance is part of this design only.
   Margin reserves page flow for the artwork extending outside the frame box.
   Core geometry, image cropping and all other designs are untouched. */
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-design-birthday-frame {
    margin-block: clamp(35px, 4.5vw, 72.5px);
}
@media (max-width: 767px) {
    .bjc-studio-section.bjc-studio-frame-design.bjc-studio-design-birthday-frame {
        margin-block: clamp(18px, 5vw, 36px);
    }
}

/* Birthday Frame 1.0.5 — presentation only. Core owns Frame geometry and media behaviour. */
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-design-birthday-frame .bjc-frame-baseline-box {
    position: relative;
    isolation: isolate;
    padding: max(var(--bjc-frame-baseline-padding), 16px);
    border-width: max(var(--bjc-frame-baseline-thickness), 11px);
    border-style: solid;
    border-color: var(--bjc-frame-baseline-accent, #ff4f8b);
    background-color: var(--bjc-frame-baseline-accent, #ff4f8b);
    background-image:
        radial-gradient(circle at 14% 12%, rgba(255,255,255,.96) 0 3px, transparent 4px),
        radial-gradient(circle at 82% 20%, rgba(255,222,67,.95) 0 4px, transparent 5px),
        radial-gradient(circle at 24% 84%, rgba(62,211,255,.92) 0 4px, transparent 5px),
        radial-gradient(circle at 88% 78%, rgba(151,92,246,.92) 0 4px, transparent 5px),
        linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.04) 42%, rgba(255,205,57,.22) 100%);
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat;
    background-size: 72px 72px, 96px 96px, 88px 88px, 112px 112px, 100% 100%;
    box-shadow:
        0 14px 30px rgba(73, 31, 57, .28),
        0 0 0 4px rgba(255,255,255,.92),
        0 0 0 7px rgba(255,210,55,.88),
        inset 0 0 0 3px rgba(255,255,255,.68);
}

/* Keep Core media in normal flow. Decoration is layered around it only. */
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-design-birthday-frame .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-design-birthday-frame .bjc-studio-frame-footer-inside {
    position: relative;
    z-index: 2;
}

/* Bright inner party trim. It is an absolute visual layer and does not affect Frame size. */
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-design-birthday-frame .bjc-frame-baseline-box::before {
    content: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
    inset: 5px;
    border: 3px dashed rgba(255,255,255,.92);
    border-radius: max(0px, calc(var(--bjc-frame-baseline-radius) - 4px));
    box-shadow: inset 0 0 0 2px rgba(255,211,61,.82);
}

/* Photographic balloon layers are independent and anchored to the actual frame edges.
   Each decoration uses its own span rather than the shared full-height ::after layer. */
.bjc-studio-design-birthday-frame .bjc-frame-baseline-box::after { content: none; }
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration {
    position: absolute; pointer-events: none; display: block;
    z-index: 6; filter: drop-shadow(0 7px 5px rgba(0,0,0,.22));
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--corner {
    left: -2%; right: -2%; top: -14px; height: 0;
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--corner::before,
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--corner::after {
    content: ''; position: absolute; top: 0; width: 24%;
    aspect-ratio: 1312 / 1199; background-size: contain; background-repeat: no-repeat;
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--corner::before {
    left: 0; background-image: url('../../../images/birthday-balloons-left.webp'); background-position: left top;
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--corner::after {
    right: 0; background-image: url('../../../images/birthday-balloons-right.webp'); background-position: right top;
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--hanging {
    left: 12%; right: 12%; top: -14px; height: 0; z-index: 7;
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--hanging::before {
    content: ''; position: absolute; left: 0; top: 0; width: 100%;
    aspect-ratio: 1983 / 793; background: url('../../../images/birthday-balloon-garland.webp') center top / contain no-repeat;
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--standing {
    left: -2%; right: -2%; bottom: -14px; height: 0; z-index: 7;
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--standing::before,
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--standing::after {
    content: ''; position: absolute; bottom: 0; width: 22%;
    aspect-ratio: 941 / 1672; background-size: contain; background-repeat: no-repeat;
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--standing::before {
    left: 0; background-image: url('../../../images/birthday-balloons-standing-left.webp'); background-position: left bottom;
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-decoration--standing::after {
    right: 0; background-image: url('../../../images/birthday-balloons-standing-right.webp'); background-position: right bottom;
}

@media (max-width: 767px) {
    .bjc-studio-section.bjc-studio-frame-design.bjc-studio-design-birthday-frame .bjc-frame-baseline-box {
        padding: max(var(--bjc-frame-baseline-padding), 11px);
        border-width: max(var(--bjc-frame-baseline-thickness), 8px);
        box-shadow:
            0 10px 22px rgba(73, 31, 57, .24),
            0 0 0 3px rgba(255,255,255,.92),
            0 0 0 5px rgba(255,210,55,.86),
            inset 0 0 0 2px rgba(255,255,255,.66);
    }
    .bjc-studio-section.bjc-studio-frame-design.bjc-studio-design-birthday-frame .bjc-frame-baseline-box::before {
        inset: 4px;
        border-width: 2px;
    }
}

/* Optional Birthday banner: independent Core-owned Design Extras setting. */
.bjc-studio-design-birthday-frame .bjc-frame-baseline-box { position: relative; }
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-extra-banner {
 position:absolute; z-index:4; top:0; left:50%; transform:translateX(-50%);
 white-space:nowrap; width:max-content; max-width:94%; box-sizing:border-box; pointer-events:none;
 font-weight:800; font-size:clamp(16px,3.2vw,40px); line-height:1.2;
 text-align:center; text-shadow:0 2px 3px rgba(0,0,0,.3);
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-extra-banner--ribbon {
 padding:.25em 1.25em; color:#fff; background:linear-gradient(115deg,#ec286c,#ff9e34,#ef327d);
 border:3px solid #ffdb6a; border-radius:6px 6px 22px 22px;
 box-shadow:0 5px 10px rgba(0,0,0,.22);
}
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-birthday-extra-banner--bunting {
 padding:.32em .85em .55em; color:#6c2379;
 background:repeating-linear-gradient(90deg,#ffe16e 0 22px,#f6bde9 22px 44px,#b8f5ec 44px 66px);
 border-top:3px solid #a64582; clip-path:polygon(0 0,100% 0,100% 75%,95% 100%,90% 75%,85% 100%,80% 75%,75% 100%,70% 75%,65% 100%,60% 75%,55% 100%,50% 75%,45% 100%,40% 75%,35% 100%,30% 75%,25% 100%,20% 75%,15% 100%,10% 75%,5% 100%,0 75%);
}


/* Decoration anchors use identical pixel offsets at all breakpoints. */

/* Starter-only guidance: the adapter inserts this solely for the placeholder. */
.bjc-studio-design-birthday-frame .bjc-frame-baseline-media { position: relative; }
.bjc-birthday-placeholder-hint { position:absolute; left:50%; bottom:9%; transform:translateX(-50%); width:max-content; max-width:85%; padding:7px 12px; border-radius:6px; background:rgba(35,22,55,.56); color:#fff; font:500 clamp(10px,1.2vw,15px)/1.4 sans-serif; text-align:center; pointer-events:none; z-index:4; }

/* Position sliders: each pair moves symmetrically, relative to its existing frame anchors.
   Only decoration pseudo-elements move; Core frame and media geometry are untouched. */
.bjc-birthday-decoration--corner::before {
    transform: translate(calc(-1 * var(--bjc-balloon-x, 0px)), var(--bjc-balloon-y, 0px));
}
.bjc-birthday-decoration--corner::after {
    transform: translate(var(--bjc-balloon-x, 0px), var(--bjc-balloon-y, 0px));
}
.bjc-birthday-decoration--standing::before {
    transform: translate(calc(-1 * var(--bjc-balloon-x, 0px)), 0%);
}
.bjc-birthday-decoration--standing::after {
    transform: translate(var(--bjc-balloon-x, 0px), 0%);
}
.bjc-birthday-decoration--hanging::before {
    transform: translateY(calc(var(--bjc-balloon-y, 0px) - 18%));
}

/* 1.0.28: frame-relative balloon sizing and mobile anchors. */
/* 1.0.28: the actual Core frame box is the containing block at every viewport width.
   Balloon pair widths now follow the frame rather than the browser viewport. */
:is(.bjc-studio-design-birthday-frame,.bjc-studio-design-birthday-gold-moulding-landscape,.bjc-studio-design-birthday-gold-moulding-square,.bjc-studio-design-birthday-gold-moulding-portrait,.bjc-studio-design-birthday-baby-2-landscape,.bjc-studio-design-birthday-baby-2-square,.bjc-studio-design-birthday-baby-2-portrait) .bjc-frame-baseline-box {
    position: relative;
    overflow: visible;
}

