@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes fspinb{to{--ang:360deg}}@keyframes fsweep{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(320%) skewX(-18deg)}}@keyframes fdot{50%{opacity:.3}}
.fc{position:relative;display:flex}
.fc__box{position:relative;width:100%;display:flex;flex-direction:column;border-radius:22px;background:linear-gradient(160deg,#1a1a1f 0%,#101013 55%,#0b0b0d 100%);border:1px solid var(--f-line);transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .4s,border-color .4s;will-change:transform;box-shadow:0 20px 40px -30px #000,inset 0 1px 0 rgba(255,255,255,.05)}
.fc__box:before{content:'';position:absolute;inset:-1px;border-radius:23px;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 62%,var(--f-accent) 78%,var(--f-gold) 88%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s;animation:fspinb 3.5s linear infinite}
.fc__box:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--f-accent) 16%,transparent),transparent 45%);opacity:0;transition:opacity .3s}
.fc:hover .fc__box{box-shadow:0 44px 70px -36px color-mix(in srgb,var(--f-accent) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.08)}.fc:hover .fc__box:before,.fc:hover .fc__box:after{opacity:1}
.fc__media{position:relative;display:block;margin:10px 10px 0;border-radius:15px;overflow:hidden;aspect-ratio:1/1;background:radial-gradient(circle at 50% 35%,#2c2c33,#0d0d10 72%)}
.fc__media:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(8,8,10,.55))}
.fc__media:after{content:'';position:absolute;top:0;bottom:0;left:0;width:38%;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-130%) skewX(-18deg)}.fc:hover .fc__media:after{animation:fsweep .9s ease}
.fc__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .5s}.fc__img--h{opacity:0}.fc:hover .fc__img--h{opacity:1}.fc:hover .fc__img{transform:scale(1.08)}
.fc__view{position:absolute;left:50%;bottom:14px;z-index:4;transform:translate(-50%,24px);opacity:0;white-space:nowrap;padding:9px 18px;border-radius:999px;background:rgba(10,10,12,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);font:700 10px var(--f-body);letter-spacing:.18em;text-transform:uppercase;transition:.4s cubic-bezier(.2,.8,.2,1)}.fc:hover .fc__view{transform:translate(-50%,0);opacity:1}
.fc__badges{position:absolute;top:22px;left:22px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:6px;transform:translateZ(42px);pointer-events:none}.fc__badges>span{padding:5px 11px;border-radius:999px;font:700 10px var(--f-body);letter-spacing:.12em;text-transform:uppercase;background:rgba(10,10,12,.78);backdrop-filter:blur(8px);border:1px solid var(--f-line)}.fc__badges .is-sale{background:linear-gradient(135deg,var(--f-accent),#ff9a3c);border:0;color:#fff;box-shadow:0 8px 20px -8px var(--f-accent)}.fc__badges .is-low:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--f-accent);margin-right:7px;animation:fdot 1.2s infinite}
.fc__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:16px 18px 18px;transform:translateZ(16px)}
.fc__type{align-self:flex-start;font:700 10px var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--f-accent);background:color-mix(in srgb,var(--f-accent) 12%,transparent);padding:4px 10px;border-radius:999px}
.fc__title{margin:0;font:600 15px/1.4 var(--f-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}.fc__title a:hover{color:var(--f-gold)}
.fc__price{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:4px}.fc__price small{color:var(--f-muted);font-size:11px;text-transform:uppercase;letter-spacing:.14em}.fc__price b{font:700 23px var(--f-head);color:var(--f-gold)}.fc__price s{color:var(--f-muted);font-size:13px}
.fc__form{display:grid;gap:8px}.fc__sel{width:100%;background:#09090b;color:#fff;border:1px solid var(--f-line);border-radius:12px;padding:11px 12px;font:500 13px var(--f-body);cursor:pointer}.fc__sel:focus{outline:2px solid var(--f-accent)}
.fc__btn{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;border-radius:12px;border:1px solid color-mix(in srgb,var(--f-accent) 55%,transparent);background:transparent;color:#fff;font:700 11px var(--f-body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.fc__btn:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--f-accent),#ff9a3c);transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}.fc__btn:hover:before{transform:none}.fc__btn:hover{border-color:transparent;box-shadow:0 14px 30px -14px var(--f-accent)}.fc__btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}.fc__btn[disabled]{opacity:.6;cursor:wait}.fc__btn.is-off{opacity:.45;cursor:default}.fc__btn.is-off:before{display:none}
.fc.is-out .fc__img{filter:grayscale(.85) brightness(.65)}
@media(hover:none){.fc__view{display:none}}
@media(max-width:600px){.fc__media{margin:6px 6px 0;border-radius:12px}.fc__badges{top:14px;left:14px}.fc__body{padding:12px 12px 14px;gap:8px}.fc__title{font-size:13px}.fc__price b{font-size:18px}.fc__btn{min-height:42px;font-size:10px;letter-spacing:.1em}.fc__sel{font-size:12px;padding:9px}.fc__box{border-radius:18px}}