/*
 * Pulse theme — lively, animated store on top of storefront-market.css.
 * Scoped to html[data-theme="pulse"]. Its "auto" motion level is bold
 * (see ThemeConfig); the moving parts here also respect data-motion.
 * Uses tokens so Theme Builder colour changes carry through.
 */

html[data-theme="pulse"] {
    --sf-mk-gap: 18px;
    --sf-mk-radius: var(--theme-card-radius, 16px);
    --pulse-accent: var(--theme-color-secondary);
    --pulse-gradient: linear-gradient(120deg, var(--theme-color-primary), color-mix(in srgb, var(--theme-color-primary) 55%, var(--pulse-accent)));
}

/* ---------- Announcement bar ---------- */

html[data-theme="pulse"] .sf-ticker {
    background: var(--pulse-gradient);
    color: #ffffff;
    border-bottom: 0;
    font-weight: 500;
}

/* ---------- Masthead & search ---------- */

html[data-theme="pulse"] .sf-masthead {
    border-bottom: 0;
}

html[data-theme="pulse"] .sf-masthead .sf-search-input {
    border: 2px solid var(--theme-color-border);
    border-inline-end: 0;
    border-radius: 999px;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    background: var(--theme-color-surface);
    padding-inline-start: 20px;
}

html[data-theme="pulse"] .sf-masthead .sf-search-input:focus {
    border-color: var(--theme-color-primary);
    background: var(--theme-color-surface-raised);
}

html[data-theme="pulse"] .sf-search-btn {
    border-radius: 0 999px 999px 0;
    background: var(--pulse-gradient);
}

[dir="rtl"][data-theme="pulse"] .sf-search-btn {
    border-radius: 999px 0 0 999px;
}

html[data-theme="pulse"] .sf-action {
    border-radius: 12px;
}

html[data-theme="pulse"] .sf-cart-badge {
    background: var(--theme-color-danger);
}

/* ---------- Category bar: underline grows from the centre ---------- */

html[data-theme="pulse"] .sf-catbar {
    border-top: 1px solid var(--theme-color-border);
}

@media (min-width: 992px) {
    html[data-theme="pulse"] .sf-catbar-list {
        justify-content: center;
        gap: 0.5rem;
    }

    html[data-theme="pulse"] .sf-catbar-secondary.is-push {
        margin-inline-start: 0;
    }
}

html[data-theme="pulse"] .sf-catbar-link,
html[data-theme="pulse"] .sf-catbar-link:hover,
html[data-theme="pulse"] .sf-catbar-link.active {
    position: relative;
    border-bottom-color: transparent;
}

html[data-theme="pulse"] .sf-catbar-link::after {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    bottom: 4px;
    height: 3px;
    border-radius: 3px;
    background: var(--pulse-gradient);
    transform: scaleX(0);
    transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

html[data-theme="pulse"] .sf-catbar-link:hover::after,
html[data-theme="pulse"] .sf-catbar-link.active::after {
    transform: scaleX(1);
}

html[data-theme="pulse"][data-motion="none"] .sf-catbar-link::after {
    transition: none;
}

@media (max-width: 991.98px) {
    html[data-theme="pulse"] .sf-catbar-link::after {
        display: none;
    }
}

/* ---------- Page ---------- */

html[data-theme="pulse"] .sf-main:has(.sf-home) {
    background: var(--theme-color-bg);
}

html[data-theme="pulse"] .sf-block {
    margin-top: 3rem;
}

html[data-theme="pulse"] .sf-row-title {
    font-weight: var(--theme-weight-bold);
}

html[data-theme="pulse"] .sf-row-link {
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--theme-color-primary-soft);
    color: var(--theme-color-primary);
}

html[data-theme="pulse"] .sf-row-link:hover {
    background: var(--theme-color-primary);
    color: var(--theme-color-text-inverse);
}

/* ---------- Hero ---------- */

html[data-theme="pulse"] .sf-hero-grid {
    padding-top: 1rem;
    gap: var(--sf-mk-gap);
}

html[data-theme="pulse"] .sf-hero-main {
    border-radius: var(--theme-radius-lg);
}

html[data-theme="pulse"] .sf-hero-main .swiper-hero,
html[data-theme="pulse"] .sf-hero-main .hero-slide {
    height: clamp(280px, 34vw, 440px);
}

html[data-theme="pulse"] .sf-hero-main .hero-overlay {
    background: linear-gradient(to top, rgba(22, 18, 31, 0.6), rgba(22, 18, 31, 0) 60%);
}

html[data-theme="pulse"] .sf-hero-tag {
    border-radius: 999px;
    padding: 3px 12px;
    background: var(--theme-color-danger);
    color: #ffffff;
}

html[data-theme="pulse"] .sf-btn-light {
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
}

html[data-theme="pulse"] .sf-hero-main .swiper-pagination-bullet-active {
    background: #ffffff;
}

html[data-theme="pulse"] .sf-hero-side {
    gap: var(--sf-mk-gap);
}

html[data-theme="pulse"] .sf-promo-tile,
html[data-theme="pulse"] .sf-promo-tile.is-alt {
    border-radius: var(--theme-radius-lg);
    box-shadow: none;
}

html[data-theme="pulse"] .sf-promo-tile,
html[data-theme="pulse"] .sf-promo-tile:hover {
    background: var(--pulse-gradient);
    background-size: 200% 200%;
    color: #ffffff;
}

html[data-theme="pulse"] .sf-promo-tile.is-alt,
html[data-theme="pulse"] .sf-promo-tile.is-alt:hover {
    background: var(--theme-color-text);
    color: #ffffff;
}

html[data-theme="pulse"] .sf-promo-tile .sf-promo-tag {
    border-radius: 999px;
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.2);
}

html[data-theme="pulse"] .sf-promo-tile.is-alt .sf-promo-tag {
    background: var(--theme-color-danger);
}

/* Gradient drifts slowly on the first promo tile */
html[data-theme="pulse"][data-motion="bold"] .sf-promo-tile:not(.is-alt) {
    animation: pulse-drift 9s ease-in-out infinite alternate;
}

@keyframes pulse-drift {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* ---------- Category chips: gradient ring ---------- */

html[data-theme="pulse"] .sf-chip-media {
    border: 0;
    padding: 3px;
    background: var(--theme-color-border);
}

html[data-theme="pulse"] .sf-chip-media img {
    border-radius: 50%;
    border: 3px solid var(--theme-color-bg);
}

html[data-theme="pulse"] .sf-chip:hover .sf-chip-media,
html[data-theme="pulse"] .sf-chip:focus-visible .sf-chip-media {
    background: conic-gradient(from 0deg, var(--theme-color-primary), var(--pulse-accent), var(--theme-color-primary));
}

html[data-theme="pulse"][data-motion="bold"] .sf-chip:hover .sf-chip-media {
    animation: pulse-spin 2.4s linear infinite;
}

html[data-theme="pulse"][data-motion="bold"] .sf-chip:hover .sf-chip-media img {
    animation: pulse-spin 2.4s linear infinite reverse;
}

@keyframes pulse-spin {
    to { transform: rotate(360deg); }
}

html[data-theme="pulse"] .sf-chip-media.is-icon {
    background: var(--theme-color-primary-soft);
    color: var(--theme-color-primary);
}

/* ---------- Product card ---------- */

html[data-theme="pulse"] .sf-product-card {
    border: 1px solid var(--theme-color-border);
    border-radius: var(--sf-mk-radius);
    background: var(--theme-color-surface-raised);
    overflow: hidden;
}

html[data-theme="pulse"] .sf-product-card:hover {
    border-color: color-mix(in srgb, var(--theme-color-primary) 35%, var(--theme-color-border));
}

html[data-theme="pulse"] .sf-product-card .sf-product-media {
    margin: 8px;
    border-bottom: 0;
    border-radius: calc(var(--sf-mk-radius) - 6px);
    background: var(--theme-color-surface);
    overflow: hidden;
}

html[data-theme="pulse"] .sf-product-card .sf-product-media img {
    mix-blend-mode: multiply;
}

html[data-theme="pulse"] .sf-product-card .sf-product-body {
    padding-top: 0.25rem;
}

html[data-theme="pulse"] .sf-product-card .sf-price {
    color: var(--theme-color-primary);
}

html[data-theme="pulse"] .sf-flag {
    border-radius: 999px;
    padding: 3px 10px;
}

html[data-theme="pulse"] .sf-flag.is-rank {
    background: var(--theme-color-text);
}

html[data-theme="pulse"] .sf-flag.is-warning {
    background: var(--theme-color-danger);
}

html[data-theme="pulse"] .sf-product-card .sf-product-actions .btn {
    border-radius: 999px;
}

html[data-theme="pulse"] .sf-product-card .sf-product-actions .btn-primary {
    background: var(--theme-color-primary-soft);
    border-color: transparent;
    color: var(--theme-color-primary);
    transition: background 200ms ease, color 200ms ease;
}

html[data-theme="pulse"] .sf-product-card:hover .sf-product-actions .btn-primary,
html[data-theme="pulse"] .sf-product-card .sf-product-actions .btn-primary:focus-visible {
    background: var(--theme-color-primary);
    color: var(--theme-color-text-inverse);
}

/* ---------- Budget, reasons, brands ---------- */

html[data-theme="pulse"] .sf-budget-card {
    border: 0;
    border-radius: var(--sf-mk-radius);
    background: var(--theme-color-surface);
    transition: transform 240ms ease, background 200ms ease;
}

html[data-theme="pulse"] .sf-budget-card:hover {
    background: var(--theme-color-primary-soft);
}

html[data-theme="pulse"][data-motion="bold"] .sf-budget-card:hover {
    transform: translate3d(0, -4px, 0);
}

html[data-theme="pulse"] .sf-budget-amount {
    background: var(--pulse-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html[data-theme="pulse"] .sf-reason {
    border: 0;
    border-radius: var(--sf-mk-radius);
    background: var(--theme-color-surface);
}

html[data-theme="pulse"] .sf-reason > .bi {
    background: var(--pulse-gradient);
    color: #ffffff;
}

html[data-theme="pulse"][data-motion="bold"] .sf-reason:hover > .bi {
    animation: pulse-wiggle 600ms ease;
}

@keyframes pulse-wiggle {
    30% { transform: rotate(-12deg) scale(1.08); }
    60% { transform: rotate(8deg); }
}

html[data-theme="pulse"] .sf-brands .sf-brand-logo {
    border: 0;
    background: var(--theme-color-surface);
}

/* ---------- Newsletter ---------- */

html[data-theme="pulse"] .sf-newsletter {
    border: 0;
    border-radius: var(--theme-radius-lg);
    background: var(--pulse-gradient);
    background-size: 200% 200%;
    color: rgba(255, 255, 255, 0.88);
}

html[data-theme="pulse"][data-motion="bold"] .sf-newsletter {
    animation: pulse-drift 12s ease-in-out infinite alternate;
}

html[data-theme="pulse"] .sf-newsletter .sf-row-title {
    color: #ffffff;
}

html[data-theme="pulse"] .sf-newsletter .sf-row-title::after {
    background: #ffffff;
}

html[data-theme="pulse"] .sf-newsletter-form .form-control {
    border: 0;
    border-radius: 999px;
    padding-inline: 1.25rem;
}

html[data-theme="pulse"] .sf-newsletter-form .btn {
    border-radius: 999px;
    background: var(--theme-color-text);
    border-color: var(--theme-color-text);
    color: #ffffff;
    padding-inline: 1.5rem;
}

/* ---------- Buttons site-wide ---------- */

html[data-theme="pulse"] .btn {
    border-radius: var(--theme-button-radius, 999px);
}