/* Zaket Potato — Christmas touches (only active when festive.js adds html.zp-festive) */

/* Snowfall in the hero */
.xmas-snow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.xmas-snow i {
    position: absolute; top: -12px; display: block; border-radius: 50%;
    background: #fff7e8; box-shadow: 0 0 6px rgba(255,247,232,.6);
    animation-name: zp-snow-fall, zp-snow-sway; animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite; animation-direction: normal, alternate;
}
@keyframes zp-snow-fall { to { top: 100%; } }
@keyframes zp-snow-sway { from { margin-left: -14px; } to { margin-left: 14px; } }

/* Fairy lights under the yellow band */
.xmas-lights { position: relative; height: 0; z-index: 4; pointer-events: none; }
.xmas-strand {
    position: absolute; left: 0; right: 0; top: 0; height: 30px; overflow: hidden;
    display: flex;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Cpath d='M0 1 Q24 16 48 1' fill='none' stroke='%2325170f' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0;
}
.xmas-strand i {
    flex: 0 0 auto; position: relative; width: 10px; height: 15px; margin: 10px 19px 0;
    border: 2px solid #25170f; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: var(--bulb, #ff6b19);
    box-shadow: 0 0 10px 2px var(--glow, rgba(255,107,25,.55));
    animation: zp-twinkle 2.8s ease-in-out infinite;
}
.xmas-strand i::before { /* bulb cap */
    content: ''; position: absolute; left: 50%; top: -6px; width: 6px; height: 5px; margin-left: -3px;
    background: #25170f; border-radius: 1px;
}
.xmas-strand i:nth-child(5n+1) { --bulb: #b73222; --glow: rgba(183,50,34,.6); }
.xmas-strand i:nth-child(5n+2) { --bulb: #ffc928; --glow: rgba(255,201,40,.65); animation-delay: -.6s; }
.xmas-strand i:nth-child(5n+3) { --bulb: #2f8f4e; --glow: rgba(47,143,78,.55); animation-delay: -1.3s; }
.xmas-strand i:nth-child(5n+4) { --bulb: #fff7e8; --glow: rgba(255,247,232,.7); animation-delay: -2s; }
.xmas-strand i:nth-child(5n)   { --bulb: #ff6b19; --glow: rgba(255,107,25,.6); animation-delay: -.9s; }
.xmas-strand i:nth-child(odd) { transform: rotate(-8deg); }
.xmas-strand i:nth-child(even) { transform: rotate(8deg); }
@keyframes zp-twinkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(.6); box-shadow: 0 0 3px 0 var(--glow); } }

@media (max-width: 600px) {
    .xmas-strand { height: 24px; background-size: 36px 12px; }
    .xmas-strand i { width: 8px; height: 12px; margin: 8px 14px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .xmas-strand i { animation: none; }
}

/* Gift card: Christmas ribbon and bow */
.xmas-ribbon {
    position: absolute; top: -4px; bottom: -4px; left: 70%; width: 9%; pointer-events: none;
    background: #b73222; border-left: 3px solid #25170f; border-right: 3px solid #25170f;
    background-image: linear-gradient(90deg, transparent 40%, rgba(255,247,232,.35) 40% 55%, transparent 55%);
}
.xmas-bow { position: absolute; top: -17%; left: calc(74.5% - 46px); width: 92px; pointer-events: none; transform: rotate(4deg); filter: drop-shadow(3px 3px 0 rgba(37,23,15,.35)); }
.xmas-bow svg { display: block; width: 100%; height: auto; }
.xmas-gift-note {
    display: inline-block; margin: 0 0 1.2rem; padding: .5rem .8rem; font-weight: 800; font-size: .92rem; line-height: 1.4;
    background: #fff7e8; color: #25170f; border: 3px solid #25170f; box-shadow: 4px 4px 0 #b73222; transform: rotate(-.6deg);
}
@media (max-width: 600px) { .xmas-bow { width: 66px; left: calc(74.5% - 33px); } .xmas-gift-note { font-size: .85rem; } }