/* Animated promotion badges & site-wide promo marquee */
.penny-promo-theme-marquee {
    z-index: 40;
    border-bottom: 1px solid rgba(18, 18, 18, 0.08);
}

.penny-promo-theme-marquee:hover .marquee-group {
    animation-play-state: paused;
}

.penny-promo-theme-marquee__item {
    text-decoration: none;
    text-transform: uppercase;
}

.penny-promo-theme-marquee__item strong {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-left: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #fff;
    color: var(--theme, #ef8917);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(18, 18, 18, 0.08);
}

@keyframes penny-promo-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes penny-promo-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.penny-promo-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: calc(100% - 20px);
    pointer-events: none;
}

.penny-promo-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.26rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}

.penny-promo-badge--deal {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.penny-promo-badge--half {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.penny-promo-badge--percent {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.penny-promo-badge--ship {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.penny-promo-badge--save {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.penny-promo-badge--default {
    background: linear-gradient(135deg, #34495e, #2c3e50);
}

.penny-promo-badge:nth-child(n + 3) {
    display: none;
}

@keyframes penny-badge-pulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.04); filter: brightness(1.12); }
}

.shop-card-items .thumb {
    position: relative;
}

.penny-breadcrumb-with-badge {
    position: relative;
    overflow: hidden;
}

.penny-breadcrumb-badge {
    position: absolute;
    z-index: 2;
    width: clamp(78px, 16vw, var(--penny-breadcrumb-badge-size, 180px));
    max-width: min(42vw, var(--penny-breadcrumb-badge-size, 180px));
    max-height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 1rem 1rem rgba(0, 0, 0, 0.28));
    pointer-events: none;
}

.penny-breadcrumb-with-badge[data-badge-position="top-left"] .penny-breadcrumb-badge {
    top: var(--penny-breadcrumb-badge-offset-y, 24px);
    left: var(--penny-breadcrumb-badge-offset-x, 24px);
}

.penny-breadcrumb-with-badge[data-badge-position="top-right"] .penny-breadcrumb-badge {
    top: var(--penny-breadcrumb-badge-offset-y, 24px);
    right: var(--penny-breadcrumb-badge-offset-x, 24px);
}

.penny-breadcrumb-with-badge[data-badge-position="center-left"] .penny-breadcrumb-badge {
    top: 50%;
    left: var(--penny-breadcrumb-badge-offset-x, 24px);
    transform: translateY(-50%);
}

.penny-breadcrumb-with-badge[data-badge-position="center-right"] .penny-breadcrumb-badge {
    top: 50%;
    right: var(--penny-breadcrumb-badge-offset-x, 24px);
    transform: translateY(-50%);
}

.penny-breadcrumb-with-badge[data-badge-position="bottom-left"] .penny-breadcrumb-badge {
    bottom: var(--penny-breadcrumb-badge-offset-y, 24px);
    left: var(--penny-breadcrumb-badge-offset-x, 24px);
}

.penny-breadcrumb-with-badge[data-badge-position="bottom-right"] .penny-breadcrumb-badge {
    right: var(--penny-breadcrumb-badge-offset-x, 24px);
    bottom: var(--penny-breadcrumb-badge-offset-y, 24px);
}

.penny-breadcrumb-with-badge[data-badge-position="center"] .penny-breadcrumb-badge {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.penny-sale-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.penny-sale-strip__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(18, 18, 18, 0.08);
    color: #121212;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(18, 18, 18, 0.06);
}

.penny-sale-strip__pill i {
    color: var(--theme, #ef8917);
}

.penny-sale-strip__pill--category:hover {
    color: var(--theme, #ef8917);
    border-color: rgba(239, 137, 23, 0.28);
}

@media (max-width: 767.98px) {
    .penny-breadcrumb-badge {
        width: clamp(58px, 28vw, calc(var(--penny-breadcrumb-badge-size, 180px) * 0.72));
        max-width: 36vw;
    }

    .penny-breadcrumb-with-badge {
        --penny-breadcrumb-badge-offset-x: min(14px, var(--penny-breadcrumb-badge-offset-x, 24px));
        --penny-breadcrumb-badge-offset-y: min(14px, var(--penny-breadcrumb-badge-offset-y, 24px));
    }

    .penny-promo-badge {
        font-size: 0.56rem;
        padding: 0.22rem 0.48rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .penny-promo-theme-marquee .marquee-group,
    .penny-promo-badge {
        animation: none;
    }
}

.penny-checkout-loyalty {
    border: 1px dashed rgba(46, 204, 113, 0.45);
    border-radius: 10px;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.06), rgba(52, 152, 219, 0.04));
}

.penny-account-loyalty-card {
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    margin-bottom: 1.5rem;
}

.penny-account-loyalty-card .points-value {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(90deg, #feca57, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.penny-referral-box {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.penny-referral-box input {
    font-family: monospace;
    font-size: 0.9rem;
}