/* Black November 2026 gift: loaded by black-november-2026.php while the promo runs.
   Top bar in campaign colours with a countdown, one quiet row under the product
   price, the same row as a banner above the speaker category grid, sticker in the
   corner of eligible product photos. Goes away with the promo folder. */

/* The row: sticker + two short lines, no box of its own under the price, so the
   fit card below stays the one framed element on the first phone screen. */
.grt-gift {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: #1b1f24;
    font-size: 14px;
    line-height: 1.35;
}

.grt-gift__pic {
    flex: 0 0 auto;
    width: 44px;
    height: auto;
}

.grt-gift__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
}

.grt-gift__text strong {
    font-weight: 600;
}

.grt-gift__text span {
    color: #5b6472;
    font-size: 13px;
}

/* Same cap as the fit card under it on desktop; the banner spans the grid. */
@media (min-width: 992px) {
    .grt-gift {
        max-width: 450px;
    }

    .grt-gift--banner {
        max-width: none;
    }
}

/* Category pages: the row sits between the car finder and the grid, so it gets a
   light surface to read as its own strip, not as part of either. */
.grt-gift--banner {
    margin: 0 0 20px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #f4f6f9;
}

/* Top bar during the campaign: Black November dark, but every stop is a GRT navy,
   from almost black up to the brand blue (#243f94) and back, so the slow drift never
   passes through grey; the bar's yellow icon is the accent. Two messages, the offer
   and "Ističe za:" + countdown: on phones they slide in turn in the bar's usual
   single line, on desktop both show side by side. */
.grt-promo-bar:has(.grt-gift-countdown) {
    background: #0b1538;
}

/* The drift is a 3×-wide gradient layer sliding on transform: composited, no
   repaint per frame (the bar's own ::after keeps the top highlight). */
.grt-promo-bar:has(.grt-gift-countdown)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 300%;
    background: linear-gradient(90deg, #05081a, #0b1538, #1a2c66, #243f94, #122258, #070c24, #0f1d4f, #243f94, #0b1538, #05081a);
    animation: grt-gift-gradient 18s ease-in-out infinite alternate;
    will-change: transform;
    pointer-events: none;
}

.grt-promo-bar:has(.grt-gift-countdown) .container {
    position: relative;
    z-index: 1;
}

@keyframes grt-gift-gradient {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-66.666%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .grt-promo-bar:has(.grt-gift-countdown)::before {
        animation: none;
        transform: translate3d(-33.333%, 0, 0);
    }

    /* No rotation script either: both lines show, one under the other. */
    .grt-promo-bar:has(.grt-gift-countdown) .grt-promo-bar__item {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 5px 0;
    }

    .grt-promo-bar:has(.grt-gift-countdown) .grt-promo-bar__list {
        display: block;
    }
}

/* Phones: one line, 12 px, no icon, the two messages take turns. */
.grt-promo-bar:has(.grt-gift-countdown) .grt-promo-bar__icon {
    display: none;
}

.grt-promo-bar:has(.grt-gift-countdown) .grt-promo-bar__text {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* "Black November:" is the bold lead; the rest of the offer stays regular and sits a
   normal word-space after it (the bar's own 8 px gap is for icon + text). */
.grt-gift-bar__rest {
    margin-left: -4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* The whole bar height is the tap target (44 px on phones), not just the text line. */
.grt-promo-bar:has(.grt-gift-countdown) a.grt-promo-bar__inner {
    padding: 12px 10px;
    margin: -12px -10px;
}

.grt-gift-countdown {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    font-weight: 600;
    white-space: nowrap;
}

.grt-gift-countdown__cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Last three days: the digits take the bar's yellow accent, the only colour change
   in the whole month, so it reads as "ending" without a word. */
.grt-promo-bar.is-ending .grt-gift-countdown__cell {
    background: #ffc95c;
    color: #0b1538;
}

.grt-gift-countdown__sep {
    margin: 0 3px;
    font-size: 11px;
    opacity: .9;
}

/* Desktop: both messages visible at once, the rotation script's classes are
   overruled here, so nothing slides. */
@media (min-width: 768px) {
    .grt-promo-bar:has(.grt-gift-countdown) .grt-promo-bar__list {
        display: flex;
        justify-content: center;
        gap: 28px;
    }

    .grt-promo-bar:has(.grt-gift-countdown) .grt-promo-bar__item {
        grid-area: auto;
        padding: 6px 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .grt-promo-bar:has(.grt-gift-countdown) .grt-promo-bar__item:first-child .grt-promo-bar__icon {
        display: inline-flex;
    }

    .grt-promo-bar:has(.grt-gift-countdown) .grt-promo-bar__text,
    .grt-gift-bar__rest {
        font-size: 13px;
    }

    .grt-gift-countdown__cell {
        width: 26px;
        height: 25px;
        border-radius: 8px;
        font-size: 13px;
    }
}

/* Product card: the sticker sits in the bottom-right corner of the photo. The theme
   prints the marker after the card's inner block, as a direct child of the card
   (.type-product), so the card is found with :has(); the picture's address comes
   inline from PHP. */
/* The marker carries the sticker's meaning for screen readers only. */
.grt-gift-badge {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.type-product:has(> .grt-gift-badge) .thumbnail-wrapper {
    position: relative;
}

.type-product:has(> .grt-gift-badge) .thumbnail-wrapper::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 2;
    width: 56px;
    height: 47px;
    background: transparent no-repeat center / contain;
    pointer-events: none;
}

@media (min-width: 768px) {
    .type-product:has(> .grt-gift-badge) .thumbnail-wrapper::after {
        right: 8px;
        bottom: 8px;
        width: 72px;
        height: 60px;
    }
}