/* Balloon decoration: edge balloons behind content + top/bottom string lights overlay. */
:root {
    --balloon-pink: #ef6f91;
    --balloon-yellow: #f6c85f;
    --balloon-blue: #62b6e8;
    --balloon-purple: #9b82d8;
    --balloon-mint: #66c7b5;
    --balloon-coral: #f28b6c;
    --light-red: #e6334f;
    --light-orange: #f5a623;
    --light-purple: #8e44ad;
    --light-teal: #1f9aa8;
    --light-green: #7bc043;
    --light-rose: #e5648a;
    --light-sky: #7cc4e3;
    --wire: #2f2b28;
    --socket: #2e7d5b;
}

body {
    position: relative;
    overflow-x: hidden;
}

.balloon-decor {
    position: fixed;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.balloon-decor__balloon {
    position: absolute;
    display: block;
    width: 42px;
    height: 56px;
    border-radius: 50% 50% 46% 46%;
    opacity: .78;
    filter: saturate(1.08);
    box-shadow: inset -10px -12px 16px rgba(40, 45, 75, .16), inset 7px 8px 10px rgba(255,255,255,.32), 0 8px 14px rgba(45,45,70,.1);
    animation: balloon-rise 15s linear infinite;
}

.balloon-decor__balloon::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 8px;
    height: 8px;
    transform: translateX(-50%) rotate(45deg);
    background: inherit;
}

.balloon-decor__balloon::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 130px;
    background: linear-gradient(rgba(80,80,100,.3), transparent);
    transform-origin: top;
    transform: rotate(3deg);
}

.balloon-decor__balloon--1 { --balloon-scale: 1; left: 2%; bottom: -100px; background: var(--balloon-pink); animation-delay: -1s; animation-duration: 18s; }
.balloon-decor__balloon--2 { --balloon-scale: .7; left: 15%; bottom: -180px; background: var(--balloon-yellow); animation-delay: -8s; animation-duration: 21s; }
.balloon-decor__balloon--3 { --balloon-scale: 1; left: 28%; bottom: -130px; background: var(--balloon-blue); animation-delay: -5s; animation-duration: 17s; }
.balloon-decor__balloon--4 { --balloon-scale: .72; left: 41%; bottom: -220px; background: var(--balloon-purple); animation-delay: -13s; animation-duration: 23s; }
.balloon-decor__balloon--5 { --balloon-scale: .55; left: 55%; bottom: -260px; background: var(--balloon-mint); animation-delay: -16s; animation-duration: 19s; }
.balloon-decor__balloon--6 { --balloon-scale: .58; left: 68%; bottom: -300px; background: var(--balloon-coral); animation-delay: -3s; animation-duration: 20s; }
.balloon-decor__balloon--7 { --balloon-scale: .42; left: 82%; bottom: -340px; background: var(--balloon-purple); animation-delay: -10s; animation-duration: 25s; }
.balloon-decor__balloon--8 { --balloon-scale: .45; left: 94%; bottom: -380px; background: var(--balloon-pink); animation-delay: -19s; animation-duration: 22s; }
.balloon-decor__balloon--9 { --balloon-scale: .65; left: 8%; bottom: -150px; background: var(--balloon-blue); animation-delay: -6s; animation-duration: 24s; }
.balloon-decor__balloon--10 { --balloon-scale: .5; left: 34%; bottom: -200px; background: var(--balloon-coral); animation-delay: -11s; animation-duration: 16s; }
.balloon-decor__balloon--11 { --balloon-scale: .62; left: 62%; bottom: -240px; background: var(--balloon-yellow); animation-delay: -14s; animation-duration: 22s; }
.balloon-decor__balloon--12 { --balloon-scale: .48; left: 89%; bottom: -160px; background: var(--balloon-mint); animation-delay: -4s; animation-duration: 19s; }

/* Cartoon string lights: wavy wire (svg) + small translucent bulbs, fixed spread via left%. */
.balloon-decor__lights {
    position: fixed;
    z-index: 1200;
    left: 0;
    right: 0;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    overflow: visible;
}

.balloon-decor__lights svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 28px;
    overflow: visible;
}

.balloon-decor__lights i {
    position: absolute;
    display: block;
    width: 11px;
    height: 17px;
    border-radius: 48% 48% 46% 46% / 58% 58% 42% 42%;
    border: 1px solid rgba(38, 50, 56, .8);
    opacity: .8;
    animation: light-flicker 2.4s ease-in-out infinite;
}

.balloon-decor__lights i::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--socket);
    border: 1px solid #234a3c;
    border-bottom: 0;
    transform: translateX(-50%);
}

.balloon-decor__lights i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 3px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
}

/* nth-of-type ignores svg child; left% spreads bulbs across full width. */
.balloon-decor__lights i:nth-of-type(1) { left: 3%; top: 8px; background: var(--light-red); transform: rotate(-9deg); animation-delay: -.4s; box-shadow: 0 0 6px 1px rgba(230,51,79,.45); }
.balloon-decor__lights i:nth-of-type(2) { left: 11%; top: 18px; background: var(--light-orange); transform: rotate(8deg); animation-duration: 1.7s; animation-delay: -1s; box-shadow: 0 0 6px 1px rgba(245,166,35,.45); }
.balloon-decor__lights i:nth-of-type(3) { left: 19%; top: 13px; background: var(--light-purple); transform: rotate(-12deg); animation-duration: 2.9s; animation-delay: -.7s; box-shadow: 0 0 6px 1px rgba(142,68,173,.45); }
.balloon-decor__lights i:nth-of-type(4) { left: 27%; top: 20px; background: var(--light-teal); transform: rotate(10deg); animation-duration: 2s; animation-delay: -1.8s; box-shadow: 0 0 6px 1px rgba(31,154,168,.45); }
.balloon-decor__lights i:nth-of-type(5) { left: 35%; top: 11px; background: var(--light-green); transform: rotate(-6deg); animation-duration: 3.1s; animation-delay: -.2s; box-shadow: 0 0 6px 1px rgba(123,192,67,.45); }
.balloon-decor__lights i:nth-of-type(6) { left: 42%; top: 21px; background: var(--light-red); transform: rotate(7deg); animation-duration: 1.9s; animation-delay: -1.4s; box-shadow: 0 0 6px 1px rgba(230,51,79,.45); }
.balloon-decor__lights i:nth-of-type(7) { left: 50%; top: 9px; background: var(--light-orange); transform: rotate(-10deg); animation-duration: 2.6s; animation-delay: -.9s; box-shadow: 0 0 6px 1px rgba(245,166,35,.45); }
.balloon-decor__lights i:nth-of-type(8) { left: 58%; top: 19px; background: var(--light-purple); transform: rotate(11deg); animation-duration: 1.5s; animation-delay: -.3s; box-shadow: 0 0 6px 1px rgba(142,68,173,.45); }
.balloon-decor__lights i:nth-of-type(9) { left: 66%; top: 10px; background: var(--light-teal); transform: rotate(-7deg); animation-duration: 2.2s; animation-delay: -2s; box-shadow: 0 0 6px 1px rgba(31,154,168,.45); }
.balloon-decor__lights i:nth-of-type(10) { left: 74%; top: 17px; background: var(--light-green); transform: rotate(9deg); animation-duration: 3.4s; animation-delay: -1.2s; box-shadow: 0 0 6px 1px rgba(123,192,67,.45); }
.balloon-decor__lights i:nth-of-type(11) { left: 81%; top: 12px; background: var(--light-rose); transform: rotate(-11deg); animation-duration: 1.8s; animation-delay: -.6s; box-shadow: 0 0 6px 1px rgba(229,100,138,.45); }
.balloon-decor__lights i:nth-of-type(12) { left: 89%; top: 20px; background: var(--light-orange); transform: rotate(6deg); animation-duration: 2.7s; animation-delay: -1.6s; box-shadow: 0 0 6px 1px rgba(245,166,35,.45); }
.balloon-decor__lights i:nth-of-type(13) { left: 96%; top: 9px; background: var(--light-sky); transform: rotate(-8deg); animation-duration: 2.1s; animation-delay: -.1s; box-shadow: 0 0 6px 1px rgba(124,196,227,.45); }

.balloon-decor__lights--top { top: 0; }
.balloon-decor__lights--bottom { bottom: 0; transform: scaleY(-1); }

/* Top lights moved inside header-lower: absolute, behind logo/search, below menu. */
.balloon-decor__lights--in-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 52px;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

/* Header/menu above lights so menu titles are never covered; dialogs stay clickable too. */
.master-wrapper-page,
.footer { position: relative; z-index: 2; }
/* Keep header stacking context above main menu while cart flyout is open. */
.header { position: relative; z-index: 1400; }
.header-lower { position: relative; overflow: visible; }
.header-lower .header-logo,
.header-lower .search-box { position: relative; z-index: 2; }
.header-menu { position: relative; z-index: 1300; }
.header-links-wrapper,
#topcartlink { position: relative; z-index: 1401; }
.flyout-cart { z-index: 1402 !important; }
.ui-dialog,
.eu-cookie-bar-notification,
.admin-header-links { position: relative; z-index: 1300; }

@keyframes light-flicker {
    0%, 100% { opacity: .8; filter: brightness(1.1); }
    8% { opacity: .45; filter: brightness(.7); }
    12% { opacity: .85; filter: brightness(1.2); }
    55% { opacity: .8; filter: brightness(1.05); }
    60% { opacity: .35; filter: brightness(.65); }
    64% { opacity: .85; filter: brightness(1.15); }
}

@keyframes balloon-rise {
    0% { margin-left: 0; transform: translate3d(0, 0, 0) rotate(-5deg) scale(var(--balloon-scale, 1)); }
    25% { margin-left: 18px; }
    50% { margin-left: -14px; }
    75% { margin-left: 12px; }
    100% { margin-left: -8px; transform: translate3d(0, -125vh, 0) rotate(7deg) scale(var(--balloon-scale, 1)); }
}

@media (max-width: 900px) {
    .balloon-decor__lights i:nth-of-type(n+11) { display: none; }
}

@media (max-width: 1000px) {
    .balloon-decor__lights--in-header { display: none !important; }
    /* mobile: logo row (header-lower) above the selectors row (header-upper) */
    .header .header-lower { order: -1; }
    .header { display: flex; flex-direction: column; }
}
@media (max-width: 640px) {
    .balloon-decor__lights { height: 44px; }
    .balloon-decor__lights svg { height: 24px; }
    .balloon-decor__lights i:nth-of-type(n+8) { display: none; }
    .balloon-decor__lights--bottom { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .balloon-decor__lights i,
    .balloon-decor__balloon { animation: none; }
}

@media (max-width: 1200px) {
    .balloon-decor__balloon--2, .balloon-decor__balloon--4, .balloon-decor__balloon--5, .balloon-decor__balloon--6,
    .balloon-decor__balloon--9, .balloon-decor__balloon--11 { display: none; }
}