/* ================= Black Friday special page ================= */
.bf-hero,.bf-products{--bf-glow:#5fd8ff;--bf-blue:#101BFF}

.bf-hero{
	position:relative;overflow:hidden;isolation:isolate;
	padding:min(16vw,120px) 0 64px;text-align:center;color:#eaf1ff;
	background:linear-gradient(160deg,#060a16 0%,#0a1130 38%,#0d1760 74%,#070b18 100%);
}
.bf-hero__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.25}
.bf-hero--plain{padding:0;min-height:0;display:block;background:#060a16}
.bf-hero--plain::before{display:none}
.bf-hero__img{display:block;width:100%;height:auto;max-width:none}
.bf-hero--plain .bf-count-wrap{margin:0;padding:18px 0}
.bf-hero::before{
	content:"";position:absolute;inset:-25%;z-index:-1;filter:blur(2px);
	background:
		radial-gradient(circle at 18% 22%,rgba(95,216,255,.35),transparent 40%),
		radial-gradient(circle at 82% 78%,rgba(16,27,255,.32),transparent 45%);
	animation:bfDrift 16s ease-in-out infinite alternate;
}
@keyframes bfDrift{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(3%,3%,0) scale(1.1)}}
.bf-hero__spark{position:absolute;border-radius:50%;background:#bdf0ff;pointer-events:none;opacity:0;box-shadow:0 0 8px 2px rgba(95,216,255,.9);animation:bfSpark 3.4s linear infinite}
@keyframes bfSpark{0%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}

.bf-badge{
	display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;
	border:1px solid rgba(95,216,255,.5);background:rgba(16,27,255,.14);color:#bdf0ff;
	font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
	animation:bfPulse 2.4s ease-in-out infinite;
}
.bf-badge .ico{stroke:#bdf0ff}
@keyframes bfPulse{0%,100%{box-shadow:0 0 0 0 rgba(95,216,255,.45)}50%{box-shadow:0 0 0 9px rgba(95,216,255,0)}}

.bf-hero h1{
	margin:.5em 0 .25em;color:#fff;font-size:clamp(2.4rem,8vw,5rem);letter-spacing:-.02em;
	text-shadow:0 0 16px rgba(95,216,255,.7),0 0 46px rgba(16,27,255,.55);
	animation:bfGlow 2.6s ease-in-out infinite;
}
@keyframes bfGlow{0%,100%{text-shadow:0 0 16px rgba(95,216,255,.6),0 0 42px rgba(16,27,255,.4)}50%{text-shadow:0 0 26px rgba(95,216,255,1),0 0 64px rgba(16,27,255,.75)}}
.bf-hero p{color:#aebbe6;font-size:1.12rem;max-width:40em;margin:0 auto 1em}

.bf-count-wrap{margin:30px 0 6px}
.bf-count{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bf-count div{min-width:76px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(95,216,255,.28);backdrop-filter:blur(4px)}
.bf-count b{display:block;font-size:2rem;line-height:1;color:var(--bf-glow);text-shadow:0 0 12px rgba(95,216,255,.6)}
.bf-count span{display:block;margin-top:4px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#aebbe6}
.bf-ended{color:#bdf0ff;font-weight:700}

.bf-cta{margin-top:26px}
.bf-cta .rsa-btn--ghost{color:#eaf1ff;box-shadow:0 0 0 2px rgba(95,216,255,.55) inset}
.bf-cta .rsa-btn--ghost:hover{background:rgba(95,216,255,.14)}

.bf-products{padding:58px 0 70px;color:#eaf1ff;background:linear-gradient(180deg,#090d1e 0%,#0b1230 100%)}
.bf-products .sec-title{color:#fff;text-align:center;text-shadow:0 0 18px rgba(95,216,255,.4)}
.bf-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin-top:18px}
.bf-pcard{
	position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;
	background:rgba(16,22,52,.78);border:1px solid rgba(95,216,255,.18);
	transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
}
.bf-pcard:hover{transform:translateY(-4px);border-color:rgba(95,216,255,.6);box-shadow:0 12px 30px rgba(16,27,255,.3)}
.bf-pcard__img{display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#fff}
.bf-pcard__img img{width:100%;height:100%;object-fit:contain}
.bf-pcard h3{margin:0;font-size:1rem;line-height:1.3}
.bf-pcard h3 a{color:#eaf1ff;text-decoration:none}
.bf-pcard h3 a:hover{color:var(--bf-glow)}
.bf-pcard .price-line{color:#bdf0ff;font-weight:700}
.bf-pcard__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}
.bf-pcard .pcard__wa{display:inline-flex;align-items:center;gap:6px;color:#aebbe6;text-decoration:none;font-size:.86rem}
.bf-pcard .pcard__wa:hover{color:var(--bf-glow)}
.bf-ribbon{
	position:absolute;top:10px;left:10px;z-index:1;padding:5px 11px;border-radius:99px;
	background:linear-gradient(135deg,var(--bf-blue),var(--bf-glow));color:#021022;
	font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
	box-shadow:0 2px 10px rgba(16,27,255,.5);
}
.bf-empty{max-width:40em;margin:0 auto;text-align:center;color:#aebbe6;padding:30px 0}
.bf-empty strong{color:#bdf0ff}

@media (max-width:620px){
	.bf-hero{padding:min(22vw,100px) 0 48px}
	.bf-count div{min-width:64px;padding:10px 10px}
	.bf-count b{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
	.bf-hero::before,.bf-hero h1,.bf-badge,.bf-hero__spark{animation:none}
}

/* ---- filter bar ---- */
.bf-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:8px 0 10px;padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(95,216,255,.22);backdrop-filter:blur(6px)}
.bf-filter label{display:flex;flex-direction:column;gap:5px;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#aebbe6}
.bf-filter input[type=search],.bf-filter input[type=number],.bf-filter select{font:inherit;font-size:.95rem;text-transform:none;letter-spacing:0;font-weight:600;color:#eaf1ff;background:rgba(6,10,22,.7);border:1.5px solid rgba(95,216,255,.28);border-radius:10px;padding:10px 12px;min-height:44px;transition:border-color .2s,box-shadow .2s}
.bf-filter select option{background:#0b1230;color:#eaf1ff}
.bf-filter input::placeholder{color:#7f8bb8}
.bf-filter input:focus,.bf-filter select:focus{outline:0;border-color:var(--bf-glow);box-shadow:0 0 0 3px rgba(95,216,255,.2)}
.bf-filter__search{flex:1 1 220px}
.bf-filter__search input{width:100%}
.bf-filter__range{display:flex;gap:6px}
.bf-filter__range input{width:96px;min-width:0}
.bf-filter .bf-filter__check{flex-direction:row;align-items:center;gap:8px;min-height:44px;text-transform:none;letter-spacing:0;font-size:.92rem;color:#eaf1ff;cursor:pointer}
.bf-filter__check input{width:18px;height:18px;accent-color:var(--bf-glow)}
.bf-filter__reset{font:inherit;font-weight:700;font-size:.9rem;color:var(--bf-glow);background:none;border:1.5px solid rgba(95,216,255,.4);border-radius:10px;padding:10px 16px;min-height:44px;cursor:pointer;transition:background .2s}
.bf-filter__reset:hover{background:rgba(95,216,255,.12)}
.bf-filter__count{margin:0 0 6px;color:#aebbe6;font-size:.9rem}
.bf-pcard[hidden]{display:none}
@keyframes bfIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
@media (max-width:620px){
	.bf-filter{padding:12px;gap:10px}
	.bf-filter label{flex:1 1 calc(50% - 10px)}
	.bf-filter__search,.bf-filter__price{flex-basis:100%!important}
	.bf-filter__range{width:100%}
	.bf-filter__range input{flex:1 1 0;width:0;min-width:0}
	.bf-filter .bf-filter__check{flex:1 1 auto}
	.bf-filter select{width:100%}
}