/*
 * Festival decoration slots - the shared look.
 * =================================================================
 * Loaded only while a festival theme is live, just before that
 * festival's own stylesheet. It styles the slot containers using the
 * --pk-* tokens, so each festival's colours flow in automatically;
 * a festival file only needs to override tokens (and add ornaments).
 *
 * Nothing here applies to the default design: none of these classes
 * exist in the page unless a festival renders them.
 */

/* Announcement bar: sits above the header, scrolls away with the page. */
.pk-festive-bar {
    background: var(--pk-geru-deep);
    color: var(--pk-paper);
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 16px;
}

.pk-festive-bar a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pk-festive-bar a:hover {
    color: var(--pk-geru-tint);
}

/* Full-width ornament strips (below the header, above the footer). */
.pk-festive-strip {
    display: block;
    width: 100%;
    line-height: 0;
    overflow: hidden;
}

.pk-festive-strip svg,
.pk-festive-strip img {
    display: block;
    width: 100%;
    height: auto;
}

/* Small label on a product page. */
.pk-festive-badge {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: var(--pk-radius-pill);
    background: var(--pk-geru-tint);
    color: var(--pk-geru-deep);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
}

/* One quiet line on the cart and checkout. No ornaments, no motion. */
.pk-festive-note {
    margin-bottom: 14px;
    padding: 8px 12px;
    border: 1px solid var(--pk-line-strong);
    border-radius: var(--pk-radius-md);
    background: var(--pk-geru-tint);
    color: var(--pk-text-body);
    font-size: 13px;
    text-align: center;
}

/* Anything a festival animates must opt in with this class so it can be
   switched off for people who ask their device to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .pk-festive-anim,
    .pk-festive-anim * {
        animation: none !important;
        transition: none !important;
    }
}

/* Admin-only reminder that a festival is being previewed, not live. */
.pk-festive-preview {
    position: fixed;
    left: 12px;
    bottom: 16px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 96px);
    padding: 8px 12px;
    border-radius: var(--pk-radius-md);
    background: var(--pk-ink);
    color: var(--pk-paper);
    font-size: 13px;
    box-shadow: var(--pk-shadow-lg);
}

.pk-festive-preview form { margin: 0; }

.pk-festive-preview button {
    padding: 4px 10px;
    border: 1px solid var(--pk-paper);
    border-radius: var(--pk-radius-sm);
    background: transparent;
    color: var(--pk-paper);
    font-size: 12px;
    cursor: pointer;
}

.pk-festive-preview button:hover {
    background: var(--pk-paper);
    color: var(--pk-ink);
}

@media (max-width: 991px) {
    /* Clear the fixed bottom navigation on phones. */
    .pk-festive-preview { bottom: 76px; }
}