/**
 * Black Friday page (/black-friday/). Loaded after home.css on this page only.
 *
 * The page is black in both site themes, so home.css tokens are set again on .bf and the shared
 * FAQ picks them up. One idea runs through the page: everything is a coupon. The hero ticket and
 * every plugin card have a tear line with notches, and scissors sit on the coupon's dashed edge.
 * Each plugin card carries the plugin's own colour as --c.
 *
 * Width, Richard 2026-11-06: the hero's band is full width with its content at most 1760px wide.
 * Everything under it uses the site's normal column, 1280px like the header (wpxpo.com's width).
 */
.bf {
	--bg: #06080c; --tint: #0b0e14; --surface: #10141c; --surface-2: #181d27; --ink: #f4f7f8; --ink-2: #c8d2d8; --muted: #94a3ad;
	--line: #232a35; --brand-ink: #35e2c0; --shadow-sm: none;
	--c-pl: #8183ff; --c-tr: #4aa6f7; --c-ih: #f45886; --c-sm: #2fc173; --c-fb: #24cfc7;
	--bf-gold: #ffd166;
	background: var(--bg); color: var(--ink-2); color-scheme: dark;
}
.bf-hero .wrap { --gut: clamp(16px, calc((100vw - 1312px) / 4 + 16px), 64px); max-width: calc(1760px + 2 * var(--gut)); padding-inline: var(--gut); }
.bf .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bf .ico { fill: none; stroke: currentColor; }
.bf :focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 2px; }

/* Hero */
.bf-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(56px, 7vw, 96px) clamp(60px, 7.5vw, 104px); background: #07060f; }
/* Soft colour only: red under the offer, violet and mint behind the ticket, a warm light from above. */
.bf-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(52% 78% at 14% 96%, rgba(255, 45, 63, .4), transparent 68%),
		radial-gradient(44% 86% at 92% 6%, rgba(104, 76, 255, .5), transparent 68%),
		radial-gradient(40% 74% at 76% 104%, rgba(10, 210, 173, .3), transparent 68%),
		radial-gradient(34% 54% at 38% -6%, rgba(255, 209, 102, .16), transparent 72%),
		linear-gradient(120deg, #0c0a1c, #07060f 52%, #0b0a1e);
}
/* Two wide beams of light, and the band fading into the section below. */
.bf-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(180deg, transparent 72%, var(--tint) 100%),
		linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, .055) 38%, transparent 47%, transparent 56%, rgba(255, 255, 255, .035) 63%, transparent 71%);
}
.bf-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.bf-hero h1 { font-size: clamp(42px, 6.2vw, 112px); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(180deg, #fff 30%, #ffe3a3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 34px rgba(255, 196, 92, .28)); }
.bf-hero h1 span { display: block; }
/* The offer on solid red. */
/* The offer with the countdown beside it, the countdown drops under it when there is no room. */
.bf-deal { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(18px, 2vw, 32px); margin-top: clamp(22px, 2.4vw, 32px); }
.bf-count { --t: clamp(54px, 4.2vw, 76px); display: grid; gap: 9px; }
.bf-count:not(.is-on) { visibility: hidden; }
.bf-count[hidden] { display: none; }
.bf-count-label { font-size: clamp(14px, 1vw, 16px); font-weight: 600; line-height: 1; color: #ffe3a3; }
.bf-count-tiles { display: flex; gap: clamp(6px, .6vw, 10px); }
.bf-count-tiles span { display: grid; justify-items: center; align-content: center; gap: 4px; width: var(--t); height: calc(var(--t) * 1.08); border-radius: 13px; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17); }
.bf-count-tiles b { font-size: calc(var(--t) * .4); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.bf-count-tiles small { font-size: clamp(10.5px, .8vw, 13px); font-weight: 500; line-height: 1; color: #c6cbdd; }
.bf-offer { display: inline-flex; align-items: center; gap: clamp(10px, 1.1vw, 16px); margin: 0; padding: clamp(8px, .9vw, 12px) clamp(18px, 2vw, 30px); border-radius: 16px; color: #fff; background: linear-gradient(135deg, #ff3346, #dc1230); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 22px 54px -18px rgba(255, 34, 58, .85); }
.bf-offer b { font-size: clamp(50px, 5.4vw, 92px); font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.bf-offer span { font-size: clamp(17px, 1.7vw, 28px); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.bf-lead { margin: 24px 0 0; max-width: 34em; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.bf-icons { display: flex; gap: 10px; margin-top: 30px; }
.bf-icons .picon { box-shadow: none; }
.bf-jump { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 16px; font-weight: 700; color: #fff; }
.bf-jump .ico { transition: transform .2s; }
.bf-jump:hover .ico { transform: translateX(4px); }

/* Celebration emojis floating behind the hero */
.bf-party { position: absolute; inset: 0; z-index: 0; max-width: 1888px; margin-inline: auto; pointer-events: none; }
.bf-party span { position: absolute; left: var(--x); top: var(--y); font-size: var(--z); line-height: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); transform: rotate(var(--r)); animation: bf-float 5s ease-in-out var(--d) infinite; }
@keyframes bf-float { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-16px) rotate(calc(var(--r) + 10deg)); } }
.bf-hero-grid { position: relative; z-index: 1; }
/* The emoji shower and bursts (black-friday.js) */
.bf-confetti { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.bf-confetti span { position: absolute; top: 0; left: 0; line-height: 1; will-change: transform, opacity; }

/* The coupon ticket */
.bf-ticket {
	--stub: clamp(118px, 11vw, 190px);
	--cut: radial-gradient(circle 14px at var(--stub) 0, transparent 98%, #000) top, radial-gradient(circle 14px at var(--stub) 100%, transparent 98%, #000) bottom;
	position: relative; display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); justify-self: end; width: 100%; max-width: 680px; border-radius: 22px;
	background: linear-gradient(135deg, #15f5c6, #0ad2ad 55%, #08b896); color: #042019;
	-webkit-mask: var(--cut); -webkit-mask-size: 100% 51%; -webkit-mask-repeat: no-repeat;
	mask: var(--cut); mask-size: 100% 51%; mask-repeat: no-repeat;
	transform: rotate(-2deg);
}
.bf-ticket-stub { display: grid; place-content: center; justify-items: center; padding: 30px 6px; border-right: 2px dashed rgba(4, 32, 25, .4); }
.bf-ticket-cut { position: absolute; left: var(--stub); top: 24%; width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: #10e3ba; color: #042019; transform: translateX(-50%) rotate(90deg); transition: top .9s cubic-bezier(.4, 0, .2, 1); }
.bf-ticket:hover .bf-ticket-cut { top: 62%; }
.bf-ticket-body { display: grid; gap: 12px; justify-items: start; min-width: 0; padding: 30px clamp(18px, 2.4vw, 30px); }
.bf-ticket-label { font-size: 15px; font-weight: 600; }
.bf-ticket-code { max-width: 100%; font-size: clamp(25px, 2.7vw, 50px); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; overflow-wrap: anywhere; }

/* Copy buttons */
.bf-copy { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font: inherit; font-size: 13.5px; font-weight: 600; color: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.bf-copy:hover { border-color: var(--c, var(--brand)); }
.bf-copy.is-done { border-color: var(--brand); background: var(--brand); color: #042019; }
.bf-copy-big { height: 42px; padding: 0 18px; border: 0; border-radius: 10px; background: #042019; font-size: 15px; font-weight: 700; color: #fff; }
.bf-copy-big:hover { background: #000; }
.bf-copy-big.is-done { background: #042019; color: #15f5c6; }

/* Section head */
.bf-plugins { padding-block: clamp(56px, 7vw, 88px); background: var(--tint); border-block: 1px solid var(--line); }
.bf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(36px, 3.4vw, 48px); }
.bf-head h2, .bf-steps h2, .bf-faq h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; color: #fff; }
.bf-head p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--muted); }
.bf-cycles { display: inline-flex; margin-bottom: 16px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.bf-cycles button { height: 34px; padding: 0 16px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer; }
.bf-cycles button:hover { color: #fff; }
.bf-cycles button[aria-pressed="true"] { background: #fff; color: #06080c; }

/* Plugin cards: each one is a coupon. A coloured top, a tear line with two notches, then the code
   and the plans. Shop Manager has its own row, the other four share one. */
.bf-grid { --pad: clamp(20px, 2.2vw, 32px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 2.6vw, 40px); }
.bf-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 34px 60px -44px var(--c); transition: transform .22s, box-shadow .22s; }
.bf-card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 44px 70px -36px var(--c); }
.bf-card-top { display: grid; align-content: start; gap: 18px; justify-items: start; padding: var(--pad) var(--pad) calc(var(--pad) + 4px); border-radius: 26px 26px 0 0; color: #06080c; background: radial-gradient(90% 120% at 100% 0, rgba(255, 255, 255, .42), transparent 62%), linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 74%, #06080c)); }
.bf-card-top { position: relative; }
.bf-card-name { display: grid; justify-items: start; gap: 16px; width: 100%; }
.bf-card-name > div { min-width: 0; flex: 1; }
.bf-card-name .picon { width: 56px; height: 56px; border-radius: 15px; padding: 6px; box-shadow: 0 8px 18px -10px rgba(6, 8, 12, .6); }
.bf-card h3 { font-size: 21px; font-weight: 800; color: #06080c; }
.bf-refund { display: block; margin-top: 5px; font-size: 13.5px; font-weight: 500; color: rgba(6, 8, 12, .74); }
.bf-card-text { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: rgba(6, 8, 12, .86); text-wrap: pretty; }
.bf-more { font-size: 14px; font-weight: 700; color: #06080c; text-decoration: underline; text-underline-offset: 3px; }
.bf .bf-more:focus-visible { outline-color: #06080c; }

/* The 40% sticker: a gold seal with a white die-cut edge, stuck on a little crooked. */
.bf-sticker[hidden] { display: none; }
.bf-sticker { --s: 112px; position: absolute; top: -16px; right: 10px; z-index: 2; display: grid; place-content: center; justify-items: center; width: var(--s); height: var(--s); margin: 0; color: #3a1d00; transform: rotate(9deg); transition: transform .28s cubic-bezier(.3, 1.6, .5, 1); }
.bf-sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 9px 12px rgba(6, 8, 12, .5)); }
.bf-sticker b, .bf-sticker span { position: relative; line-height: 1; }
.bf-sticker b { font-size: calc(var(--s) * .3); font-weight: 800; letter-spacing: -.05em; }
.bf-sticker small { position: relative; margin-bottom: 1px; font-size: calc(var(--s) * .105); font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.bf-sticker.is-top b { font-size: calc(var(--s) * .27); }
.bf-sticker span { margin-top: 1px; font-size: calc(var(--s) * .13); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bf-card:hover .bf-sticker { transform: rotate(-7deg) scale(1.1); }
.bf-card.is-wide .bf-sticker { --s: 124px; right: 18px; }
.bf-ticket-stub .bf-sticker { --s: calc(var(--stub) - 14px); position: relative; top: auto; right: auto; transform: rotate(-9deg); }
.bf-ticket:hover .bf-sticker { transform: rotate(6deg) scale(1.05); }

/* The tear line, with the page colour showing through two notches */
.bf-card-rest { position: relative; display: flex; flex: 1; flex-direction: column; gap: 28px; min-width: 0; padding: calc(var(--pad) + 6px) var(--pad) calc(var(--pad) - 4px); border-top: 2px dashed rgba(255, 255, 255, .2); }
.bf-card-rest::before, .bf-card-rest::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--tint); }
.bf-card-rest::before { left: -12px; }
.bf-card-rest::after { right: -12px; }

/* The coupon, with scissors on its dashed edge. They cut along it when the card is hovered. */
.bf-chip { position: relative; display: flex; align-items: center; gap: 10px; padding: 15px 12px 13px 16px; border: 1.5px dashed color-mix(in srgb, var(--c) 80%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, transparent); }
.bf-cut { position: absolute; top: -12px; left: 12px; width: 23px; height: 23px; padding: 2px; color: var(--c); background: var(--surface); transition: left .9s cubic-bezier(.4, 0, .2, 1); }
.bf-card:hover .bf-cut { left: calc(100% - 36px); }
.bf-chip > span { font-size: 13px; color: var(--muted); }
.bf-chip strong { min-width: 0; font-size: 16.5px; font-weight: 800; letter-spacing: .01em; color: #fff; overflow-wrap: anywhere; }
.bf-chip .bf-copy { margin-left: auto; }

/* Plans. A plugin that sells two billing cycles gets the switch; the others say which they sell. */
.bf-plans { min-width: 0; margin-top: auto; }
.bf-plans-label { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.bf-plans-note { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.bf-cycle { list-style: none; margin: 0; padding: 0; }
.bf-plans-label ~ .bf-cycle .bf-plan-price small { display: none; }
.bf-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 20px 0; border-top: 1px solid var(--line); }
.bf-plan { container-type: inline-size; }
@container (max-width: 330px) { .bf-plan-price s { flex-basis: 100%; } .bf-plan .bf-plan-price strong { font-size: 21px; } .bf-plan .bf-plan-price { column-gap: 5px; } }
.bf-plan-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; grid-column: 1 / -1; }
.bf-plan-name b { font-size: 15px; font-weight: 700; color: #fff; }
.bf-plan-name small { font-size: 13px; color: var(--muted); }
.bf-plan-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; grid-column: 1; font-variant-numeric: tabular-nums; }
.bf-plan-price s { font-size: 13px; color: var(--muted); }
.bf-plan-price strong { font-size: 23px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.bf-plan-price small { font-size: 13px; color: var(--muted); }
.bf-buy { grid-column: 2; grid-row: 2; display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 12px; border-radius: 11px; background: var(--c); font-size: 14px; font-weight: 800; color: #06080c; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.bf-buy:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px var(--c); }
.bf-plans-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 16px; border-radius: 11px; background: var(--c); font-size: 15px; font-weight: 800; color: #06080c; text-align: center; transition: box-shadow .15s; }
.bf-plans-link:hover { box-shadow: 0 12px 24px -10px var(--c); }

/* Shop Manager: the coloured part on the left, the tear line runs down, the plans fill the row */
.bf-card.is-wide { grid-column: 1 / -1; flex-direction: row; }
.bf-card.is-wide .bf-card-top { flex: 0 0 clamp(300px, 28%, 440px); border-radius: 26px 0 0 26px; }
.bf-card.is-wide .bf-card-rest { padding: calc(var(--pad) + 6px) calc(var(--pad) + 8px) calc(var(--pad) - 12px) calc(var(--pad) + 12px); border-top: 0; border-left: 2px dashed rgba(255, 255, 255, .2); }
.bf-card.is-wide .bf-card-rest::before { top: -12px; left: -13px; }
.bf-card.is-wide .bf-card-rest::after { top: auto; right: auto; bottom: -12px; left: -13px; }
.bf-card.is-wide .bf-chip { width: 100%; max-width: 400px; }
.bf-card.is-wide .bf-plans { margin-top: 0; }
.bf-card.is-wide .bf-card-rest { justify-content: center; }
.bf-card.is-wide .bf-cycle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 3.4vw, 56px); }

/* Steps */
.bf-steps { padding-block: clamp(56px, 7vw, 88px); }
.bf-steps ol { list-style: none; counter-reset: bf; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 28px 0 0; padding: 0; }
.bf-steps li { counter-increment: bf; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.bf-steps li::before { content: counter(bf); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 10px; background: var(--brand); font-weight: 800; color: #042019; }
.bf-steps h3 { font-size: 18px; font-weight: 700; color: #fff; }
.bf-steps p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }

/* Trust */
.bf-trust { padding-block: 34px; background: var(--tint); border-block: 1px solid var(--line); }
.bf-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bf-trust-item { display: flex; gap: 12px; }
.bf-trust-item .ico { width: 24px; height: 24px; color: var(--brand); }
.bf-trust h3 { font-size: 15.5px; font-weight: 700; color: #fff; }
.bf-trust p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }

/* Questions */
.bf-faq { padding-block: clamp(56px, 7vw, 88px); }
.bf-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4.5vw, 64px); align-items: start; }

/* The tear lines of the cards in a row stay level, however long each description is. */
@media (min-width: 761px) {
	.bf-card:not(.is-wide) .bf-card-text { min-height: 3.1em; }
}
@media (max-width: 1160px) {
	.bf-card.is-wide .bf-cycle { grid-template-columns: minmax(0, 1fr); }
	.bf-card.is-wide .bf-sticker { --s: 108px; right: 12px; }
}
@media (max-width: 960px) {
	/* A tall hero needs wide glows, or they turn into streaks. */
	.bf-hero::before {
		background:
			radial-gradient(130% 42% at 8% 42%, rgba(255, 45, 63, .34), transparent 70%),
			radial-gradient(120% 34% at 100% 0, rgba(104, 76, 255, .5), transparent 70%),
			radial-gradient(130% 36% at 90% 100%, rgba(10, 210, 173, .28), transparent 70%),
			linear-gradient(180deg, #0c0a1c, #07060f);
	}
	.bf-hero::after { background: linear-gradient(180deg, transparent 84%, var(--tint) 100%); }
	.bf-party span:nth-child(n+3) { display: none; }
	.bf-party span { top: calc(var(--y) * .25); }
	.bf-hero-grid, .bf-faq-grid { grid-template-columns: minmax(0, 1fr); }
	.bf-ticket { justify-self: start; max-width: 560px; transform: none; }
	.bf-steps ol { grid-template-columns: minmax(0, 1fr); }
	.bf-card.is-wide { flex-direction: column; }
	.bf-card.is-wide .bf-card-top { flex: none; border-radius: 26px 26px 0 0; }
	.bf-card.is-wide .bf-card-rest { padding: calc(var(--pad) + 6px) var(--pad) calc(var(--pad) - 4px); border-top: 2px dashed rgba(255, 255, 255, .2); border-left: 0; }
	.bf-card.is-wide .bf-card-rest::before { top: -13px; left: -12px; }
	.bf-card.is-wide .bf-card-rest::after { top: -13px; right: -12px; bottom: auto; left: auto; }
	.bf-card.is-wide .bf-chip { max-width: none; }
}
@media (max-width: 760px) {
	.bf-grid, .bf-trust-grid { grid-template-columns: minmax(0, 1fr); }
	.bf-card.is-wide .bf-cycle { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.bf-ticket { --stub: 88px; --cut: radial-gradient(circle 11px at 88px 0, transparent 98%, #000) top, radial-gradient(circle 11px at 88px 100%, transparent 98%, #000) bottom; }
	.bf-ticket-body { padding: 22px 16px; }
	.bf-ticket-cut { width: 24px; height: 24px; padding: 3px; }
	.bf-party span { font-size: calc(var(--z) * .68); }
	.bf-sticker, .bf-card.is-wide .bf-sticker { --s: 96px; right: 8px; }
	.bf-cycles { display: flex; width: 100%; }
	.bf-cycles button { flex: 1; }
}
@media (max-width: 380px) {
	.bf-chip { flex-wrap: wrap; }
	.bf-chip > span { display: none; }
	.bf-plan { grid-template-columns: minmax(0, 1fr); }
	.bf-buy { grid-column: 1; grid-row: auto; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .bf-party span { animation: none; } .bf-sticker { transition: none; } .bf-card:hover .bf-sticker { transform: rotate(9deg); } .bf-ticket:hover .bf-sticker { transform: rotate(-9deg); } .bf-jump .ico, .bf-buy, .bf-copy, .bf-card, .bf-cut, .bf-ticket-cut { transition: none; } .bf-card:hover { transform: none; } .bf-card:hover .bf-cut { left: 12px; } .bf-ticket:hover .bf-ticket-cut { top: 24%; } }