.s-prod.spx{--pc:#2563eb;--cc:#2563eb;--r:22px;position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:0;border-radius:var(--r);overflow:visible;isolation:isolate;box-shadow:0 1px 2px rgba(15,23,42,.05),0 12px 32px -14px rgba(15,23,42,.16);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1);animation:spxIn .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
.s-prod.spx::before,.s-prod.spx::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;-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);z-index:6}
.s-prod.spx::before{padding:1px;background:#e6edf8}
.s-prod.spx::after{padding:1.5px;background:linear-gradient(145deg,var(--pc),transparent 42%,transparent 58%,var(--cc));opacity:0;transition:opacity .5s}
.s-prod.spx.is-feat::before{padding:1.5px;background:linear-gradient(145deg,#f59e0b,#fde68a 22%,#e6edf8 52%)}
@keyframes spxIn{from{opacity:0;translate:0 22px}}
@supports (animation-timeline:view()){
  .s-prod.spx{animation:spxIn linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
}

.spx-media{position:relative;margin:8px 8px 0;aspect-ratio:4/3;border-radius:16px;overflow:hidden;isolation:isolate;background:linear-gradient(145deg,#f4f7fc,#e8eef8)}
.spx-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(22px) saturate(1.4);transform:scale(1.3);opacity:.6;z-index:0}
.spx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.spx-media::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(15,23,42,.26) 0,transparent 28%,transparent 64%,rgba(15,23,42,.42) 100%)}
.spx-media.is-empty::after{background:linear-gradient(180deg,transparent 60%,rgba(15,23,42,.08) 100%)}
.spx-media.is-empty{background:radial-gradient(110% 90% at 100% 0,color-mix(in srgb,var(--pc) 20%,#fff) 0,transparent 62%),radial-gradient(90% 80% at 0 100%,color-mix(in srgb,var(--pc) 14%,#fff) 0,transparent 60%),#f7f9fd}
.spx-ph{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}
.spx-ph::before{content:'';position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--pc) 30%,transparent) 1.1px,transparent 1.6px);background-size:16px 16px;-webkit-mask-image:radial-gradient(circle at 50% 46%,#000 18%,transparent 70%);mask-image:radial-gradient(circle at 50% 46%,#000 18%,transparent 70%);opacity:.7}
.spx-doc{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:-6px}
.spx-doc::before,.spx-doc::after{content:'';position:absolute;top:0;left:50%;width:76px;height:76px;margin-left:-38px;border-radius:23px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.spx-doc::before{background:color-mix(in srgb,var(--pc) 30%,#fff);transform:rotate(-12deg) translate(-9px,5px)}
.spx-doc::after{background:color-mix(in srgb,var(--pc) 16%,#fff);transform:rotate(12deg) translate(9px,5px)}
.spx-doc i{position:relative;z-index:1;width:76px;height:76px;border-radius:23px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--pc) 78%,#fff),var(--pc) 70%);box-shadow:0 18px 34px -10px color-mix(in srgb,var(--pc) 65%,transparent),inset 0 1px 0 rgba(255,255,255,.4);animation:spxFloat 4.5s ease-in-out infinite}
.spx-doc i svg{width:36px;height:36px}
.spx-doc b{position:relative;z-index:1;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.85);color:color-mix(in srgb,var(--pc) 75%,#0f172a);font-size:.74rem;font-weight:900;box-shadow:0 4px 12px rgba(15,23,42,.06)}
@keyframes spxFloat{50%{translate:0 -5px}}

.spx-shine{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);transform:translateX(-130%)}
.spx-tags{position:absolute;top:10px;inset-inline:10px;z-index:4;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;pointer-events:none}
.spx-badge,.spx-off{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;font-size:.69rem;font-weight:900;line-height:1.7;white-space:nowrap}
.spx-badge{color:#3a2500;background:linear-gradient(135deg,#fde68a,#f59e0b);box-shadow:0 6px 16px -4px rgba(245,158,11,.6)}
.spx-badge.new{color:#022c22;background:linear-gradient(135deg,#6ee7b7,#10b981);box-shadow:0 6px 16px -4px rgba(16,185,129,.55)}
.spx-off{margin-inline-start:auto;color:#fff;background:linear-gradient(135deg,#fb7185,#e11d48);box-shadow:0 6px 16px -4px rgba(225,29,72,.55);animation:spxPulse 2.6s ease-in-out infinite}
@keyframes spxPulse{50%{box-shadow:0 6px 22px -1px rgba(225,29,72,.75)}}
.spx-type,.spx-feat{position:absolute;bottom:10px;z-index:4;display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-size:.69rem;font-weight:900;line-height:1.7;white-space:nowrap;pointer-events:none}
.spx-type{inset-inline-start:10px;max-width:calc(100% - 20px);padding-block:4px;padding-inline:4px 11px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#0f172a;box-shadow:0 4px 14px rgba(15,23,42,.14)}
.spx-type i{width:21px;height:21px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--pc)}
.spx-type i svg{width:12px;height:12px}
.spx-feat{inset-inline-end:10px;padding:4px 10px;color:#fde68a;background:linear-gradient(135deg,#1e1b4b,#3730a3);box-shadow:0 6px 16px -4px rgba(49,46,129,.6)}
.spx-feat svg{width:13px;height:13px}
.spx-view{position:absolute;left:50%;top:50%;z-index:4;display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:999px;background:rgba(15,23,42,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:.78rem;font-weight:900;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-25%) scale(.9);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.spx-view svg{width:16px;height:16px}

.spx-body{flex:1;display:flex;flex-direction:column;min-width:0;padding:13px 16px 16px}
.spx-cat{position:relative;z-index:5;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;max-width:100%;margin-bottom:8px;padding-block:3px;padding-inline:8px 11px;border-radius:999px;background:color-mix(in srgb,var(--cc) 10%,#fff);color:color-mix(in srgb,var(--cc) 82%,#0f172a);font-size:.7rem;font-weight:900;line-height:1.8;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .3s,color .3s}
.spx-cat span{font-size:.8rem;line-height:1}
.spx-cat:hover{background:var(--cc);color:#fff}
.spx-title{margin:0 0 6px;font-size:.95rem;font-weight:900;line-height:1.85;color:#0f172a;min-height:calc(1.85em * 2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.spx-link{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 100% 100%/0 1.5px no-repeat;transition:background-size .5s cubic-bezier(.2,.8,.2,1),color .3s}
.spx-link::after{content:'';position:absolute;inset:0;z-index:2;border-radius:var(--r)}
.spx-link:focus{outline:none}
.spx-link:focus-visible::after{box-shadow:0 0 0 3px #fff,0 0 0 5px #3b82f6}
.spx-sub{margin:0 0 12px;font-size:.78rem;line-height:1.95;color:#64748b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.spx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;margin-bottom:13px}
.spx-meta>span{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:9px;background:#f4f7fc;color:#475569;font-size:.7rem;font-weight:800;line-height:1.8;white-space:nowrap}
.spx-meta svg{width:13px;height:13px;color:#94a3b8;flex-shrink:0}
.spx-meta .spx-rate{background:#fff7e6;color:#92400e}
.spx-meta .spx-rate svg{color:#f59e0b}
.spx-meta .spx-rate small{font-size:.66rem;font-weight:700;color:#b45309}

.spx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding-top:13px;border-top:1px dashed #e2e9f5}
.spx-price{flex:1000 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:42px;line-height:1.35}
.spx-price del{font-size:.73rem;font-weight:700;color:#94a3b8;text-decoration-color:#f43f5e;text-decoration-thickness:1.5px}
.spx-now{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.spx-now b{font-size:1.16rem;font-weight:950;color:#0f2b6b}
.spx-now small{font-size:.72rem;font-weight:800;color:#64748b}
.spx-free{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:4px 12px;border-radius:10px;background:#ecfdf5;color:#047857;font-size:.95rem;font-weight:950}
.spx-cart{position:relative;z-index:5;flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border:0;border-radius:13px;overflow:hidden;cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:900;color:#fff;text-decoration:none;white-space:nowrap;background:linear-gradient(135deg,#3b82f6,#1d4ed8 55%,#1e3a8a);box-shadow:0 10px 22px -8px rgba(37,99,235,.65);transition:transform .25s,box-shadow .25s,filter .25s}
.spx-cart svg{width:17px;height:17px;flex-shrink:0}
.spx-cart::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-130%);transition:transform .75s ease}
.spx-cart:hover{color:#fff;filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(37,99,235,.75)}
.spx-cart:hover::before{transform:translateX(130%)}
.spx-cart:active{transform:scale(.97)}
.spx-cart:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px #3b82f6}
.spx-cart.added{background:linear-gradient(135deg,#34d399,#059669 55%,#047857);box-shadow:0 10px 22px -8px rgba(5,150,105,.6);animation:spxPop .55s cubic-bezier(.3,1.6,.5,1)}
.spx.in-cart .spx-cart.added{animation:none}
.spx-cart:disabled{cursor:progress;opacity:.9;transform:none}
.spx-cart:disabled::after{content:'';width:15px;height:15px;flex-shrink:0;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spxSpin .7s linear infinite}
@keyframes spxPop{40%{transform:scale(1.07)}}
@keyframes spxSpin{to{transform:rotate(360deg)}}

@media(hover:hover){
  .s-prod.spx:hover{transform:translateY(-7px);box-shadow:0 2px 4px rgba(15,23,42,.04),0 28px 54px -20px rgba(15,23,42,.3);box-shadow:0 2px 4px rgba(15,23,42,.04),0 28px 54px -20px color-mix(in srgb,var(--pc) 50%,rgba(15,23,42,.4))}
  .s-prod.spx:hover::after{opacity:1}
  .spx:hover .spx-img{transform:scale(1.07)}
  .spx:hover .spx-shine{transform:translateX(130%);transition:transform 1s ease}
  .spx:hover .spx-view{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .spx:hover .spx-link{color:#1d4ed8;background-size:100% 1.5px;background-position:0 100%}
  .spx:hover .spx-doc::before{transform:rotate(-20deg) translate(-18px,8px)}
  .spx:hover .spx-doc::after{transform:rotate(20deg) translate(18px,8px)}
}
@media(hover:none){
  .s-prod.spx:hover{transform:none}
  .spx-view,.spx-shine{display:none}
}

@media(max-width:560px){
  .s-prod.spx{--r:18px}
  .spx-media{margin:6px 6px 0;border-radius:13px}
  .spx-body{padding:10px 11px 12px}
  .spx-cat{margin-bottom:6px;padding-inline:6px 9px;font-size:.64rem}
  .spx-title{font-size:.84rem;line-height:1.8;min-height:calc(1.8em * 2);margin-bottom:4px}
  .spx-sub{-webkit-line-clamp:1;font-size:.72rem;margin-bottom:8px}
  .spx-meta{flex-wrap:nowrap;overflow:hidden;gap:4px;margin-bottom:9px;-webkit-mask-image:linear-gradient(to left,#000 82%,transparent);mask-image:linear-gradient(to left,#000 82%,transparent)}
  .spx-meta>span{flex-shrink:0;padding:2px 7px;font-size:.64rem}
  .spx-foot{padding-top:9px;gap:8px}
  .spx-price{min-height:0}
  .spx-now b{font-size:1rem}
  .spx-free{font-size:.84rem;padding:3px 10px}
  .spx-cart{flex:1 1 100%;height:38px;padding:0 10px;border-radius:12px;font-size:.74rem;gap:6px}
  .spx-cart svg{width:15px;height:15px}
  .spx-tags{top:7px;inset-inline:7px;gap:4px}
  .spx-badge,.spx-off{padding:2px 8px;font-size:.6rem}
  .spx-type{bottom:7px;inset-inline-start:7px;max-width:calc(100% - 14px);font-size:.6rem;padding-inline:3px 8px}
  .spx-type i{width:17px;height:17px}
  .spx-type i svg{width:10px;height:10px}
  .spx-feat{bottom:7px;inset-inline-end:7px;padding:2px 7px;font-size:.6rem}
  .spx-feat svg{width:11px;height:11px}
  .spx-doc{gap:8px;transform:scale(.72)}
  .s-grid-3:has(> .s-prod.spx),.s-grid-4:has(> .s-prod.spx){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:340px){
  .s-grid-3:has(> .s-prod.spx),.s-grid-4:has(> .s-prod.spx){grid-template-columns:minmax(0,1fr)}
}
@media(max-width:400px){
  .spx-type{display:none}
  .spx-title{font-size:.8rem}
}

@media(prefers-reduced-motion:reduce){
  .s-prod.spx,.spx-doc i,.spx-off,.spx-cart.added{animation:none}
  .s-prod.spx,.spx-img,.spx-shine,.spx-view,.spx-cart,.spx-cart::before,.spx-doc::before,.spx-doc::after{transition:none}
}
.spx-price .pw{margin-bottom:2px;gap:5px}
@media(max-width:560px){.spx-price .pw-old{font-size:.7rem}.spx-price .pw-pct{font-size:.64rem;padding:0 6px}.spx-price .pw-pct svg{width:12px;height:12px}}