/* Fallback for Hyvä shops that do not build their theme's Tailwind CSS; the block adds it on Hyvä pages only.
   The Hyvä template carries Tailwind utility classes next to these mk-* classes, and everything below sits in
   :where(), so it has zero specificity: where the theme's build provides a utility, the utility wins and the bar
   follows the theme's spacing, radii and typography. The two modifier rules at the end keep normal specificity on
   purpose, because they have to beat the positioning utilities. Luma is styled from web/css/source/_module.less. */
/* Hyvä publishes its design tokens as custom properties, so the bar adopts the merchant's palette there.
   The fallbacks apply on Luma and on themes without tokens.
   :where() keeps these defaults at zero specificity, so a theme overrides any of them with a plain
   ".mk-tiers { --mk-accent: ... }" rule, no !important and no load order to worry about. */
:where(.mk-tiers) {
    --mk-accent: var(--color-primary, #2563eb);
    --mk-accent-soft: #dbeafe;
    --mk-accent-soft: color-mix(in oklab, var(--mk-accent) 14%, #fff);
    --mk-success: var(--color-secondary, #16a34a);
    --mk-success-soft: #dcfce7;
    --mk-success-soft: color-mix(in oklab, var(--mk-success) 14%, #fff);
    --mk-border: var(--color-container-darker, #e5e7eb);
    --mk-muted: var(--color-fg-secondary, #6b7280);
    --mk-text: var(--color-fg, #111827);
    --mk-surface: var(--color-surface, #fff);
    --mk-level-surface: var(--color-container, #f9fafb);
}

:where(.mk-tiers) {
    box-sizing: border-box;
    width: 100%;
    margin: 1rem 0;
    padding: 1rem 1.25rem 2.75rem;
    border: 1px solid var(--mk-border);
    border-radius: 0.75rem;
    background: var(--mk-surface);
    color: var(--mk-text);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.5rem;
    position: relative;
    font-size: 0.875rem;
}

.mk-tiers *,
.mk-tiers *::before,
.mk-tiers *::after {
    box-sizing: inherit;
}

:where(.mk-tiers__summary) {
    display: flex;
    gap: 0.75rem;
    flex: 1 1 16rem;
    min-width: 0;
}

:where(.mk-tiers__icon) {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: var(--mk-accent-soft);
    color: var(--mk-accent);
}

:where(.mk-tiers__title) {
    font-weight: 600;
    font-size: 1rem;
}

:where(.mk-tiers__current) {
    color: var(--mk-accent);
    font-weight: 500;
}

:where(.mk-tiers__pending) {
    color: var(--mk-muted);
    font-weight: 400;
}

:where(.mk-tiers__hint) {
    color: var(--mk-muted);
    font-size: 0.8125rem;
}

:where(.mk-tiers__price) {
    margin-top: 0.25rem;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

:where(.mk-tiers__price s) {
    color: var(--mk-muted);
}

:where(.mk-tiers__price strong) {
    color: var(--mk-success);
    font-size: 1rem;
}

:where(.mk-tiers__ineligible) {
    margin-top: 0.25rem;
    color: var(--mk-muted);
    font-size: 0.8125rem;
}

:where(.mk-tiers__levels) {
    display: flex;
    flex: 2 1 24rem;
    gap: 0.5rem;
}

:where(.mk-tiers__level) {
    flex: 1 1 0;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--mk-border);
    border-radius: 0.5rem;
    text-align: center;
    background: var(--mk-level-surface);
    transition: background 0.2s, border-color 0.2s;
}

:where(.mk-tiers__level--reached) {
    background: var(--mk-success-soft);
    border-color: var(--mk-success);
}

:where(.mk-tiers__level--current) {
    background: var(--mk-accent-soft);
    border-color: var(--mk-accent);
}

:where(.mk-tiers__level-quantity) {
    font-size: 0.75rem;
    color: var(--mk-muted);
}

:where(.mk-tiers__level-percent) {
    font-weight: 700;
    font-size: 1.125rem;
}

:where(.mk-tiers__level--reached .mk-tiers__level-percent) {
    color: var(--mk-success);
}

:where(.mk-tiers__level--current .mk-tiers__level-percent) {
    color: var(--mk-accent);
}

:where(.mk-tiers__level-note) {
    font-size: 0.6875rem;
    color: var(--mk-muted);
}

:where(.mk-tiers__level--reached .mk-tiers__level-note) {
    color: var(--mk-success);
}

:where(.mk-tiers__track) {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.5rem;
    height: 0.25rem;
}

:where(.mk-tiers__line) {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--mk-border);
}

:where(.mk-tiers__line--filled) {
    right: auto;
    background: var(--mk-success);
    transition: width 0.3s ease;
}

:where(.mk-tiers__dot) {
    position: absolute;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--mk-border);
    border-radius: 50%;
    background: var(--mk-surface);
    transform: translate(-50%, -50%);
}

:where(.mk-tiers__dot--reached) {
    border-color: var(--mk-success);
    background: var(--mk-success);
}

:where(.mk-tiers__dot-label) {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    color: var(--mk-muted);
}

:where(.mk-tiers__marker) {
    position: absolute;
    top: 50%;
    width: 1rem;
    height: 1rem;
    border: 3px solid var(--mk-surface);
    border-radius: 50%;
    background: var(--mk-accent);
    box-shadow: 0 0 0 2px var(--mk-accent);
    transform: translate(-50%, -50%);
    transition: left 0.3s ease;
}

:where(.mk-tiers__marker-label) {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--mk-accent);
    color: var(--color-on-primary, #fff);
    font-size: 0.625rem;
}

.mk-tiers__marker-label--start {
    left: -0.5rem;
    transform: none;
}

.mk-tiers__marker-label--end {
    left: auto;
    right: -0.5rem;
    transform: none;
}

@media (max-width: 40rem) {
    :where(.mk-tiers__levels) {
        flex-wrap: wrap;
    }

    :where(.mk-tiers__level) {
        flex-basis: calc(33.333% - 0.5rem);
    }
}

/* The product page price when a tier applies: the tier price takes over, the catalog price follows struck through. */
.mk-tier-price__original {
    margin-left: 0.5em;
    color: var(--color-fg-secondary, #6b7280);
    font-weight: 400;
    text-decoration: line-through;
}