/* eTrade storefront CSS: Product cards, rails and recommendation rows (Home, Shop, Product, Cart, Wishlist) */
.stars{color:var(--star);letter-spacing:1px;font-size:12px}
.card{border:1px solid var(--bd);border-radius:8px;overflow:hidden;background:#fff;transition:box-shadow .25s}
.card:hover{box-shadow:0 8px 24px rgba(20,20,40,.1)}
.img{background:var(--grey);height:125px;position:relative;display:grid;place-items:center;overflow:hidden}
.img>svg{width:100px;height:90px}
.off{position:absolute;top:8px;right:8px;background:var(--blue);color:#fff;font-size:9px;padding:1px 6px;border-radius:4px}
.qa{position:absolute;right:-44px;top:32px;display:flex;flex-direction:column;gap:6px;transition:right .3s ease}
.card:hover .qa,.card:focus-within .qa,.pc:hover .qa,.pc:focus-within .qa{right:8px}
.qa button{width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(20,20,40,.12)}
.qa button:hover,.qa button.on{background:var(--pink);color:#fff}
.qa svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.qa button.on svg{fill:#fff}
.info{padding:10px 12px 12px}
.info .n{font-size:11px;color:var(--muted);margin:2px 0 4px}
.pr b{font-size:15px}
.pr s{color:#9CA3AF;font-size:12px;margin-left:6px}
.pc{border:1px solid var(--bd);border-radius:14px;background:#fff;overflow:hidden;transition:box-shadow .4s,transform .4s}
.pc:hover{box-shadow:0 16px 40px rgba(20,20,40,.12);transform:translateY(-5px)}
.pc .img{height:170px}
.pc .img>svg{width:120px;height:110px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pc:hover .img>svg{transform:scale(1.1) rotate(-4deg)}
.pc .off{top:10px;right:10px}
.pc .info{padding:14px 16px 16px}
.pc .n{font-size:13px;color:var(--dark);font-weight:600;margin:4px 0 6px}
@media (max-width:480px){
.pc .img{height:130px}
.pc .img>svg{width:90px}
.pc .info{padding:10px}
.img{height:110px}
.img>svg{width:82px;height:74px}
.info{padding:8px 10px 10px}
.pr b{font-size:13px}
}
@media (hover:none){
.qa{right:8px}
.qa button{width:30px;height:30px}
.card:hover,.pc:hover{transform:none}
}
.ct{width:84px;height:84px;background:var(--grey);border-radius:12px;display:grid;place-items:center}
.ct svg{width:62px;height:62px}
.qs{display:inline-flex;align-items:center;border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.qs button{width:32px;height:34px;font-size:16px;background:var(--grey)}
.qs button:hover{background:var(--blue);color:#fff}
.qs span{min-width:34px;text-align:center;font-weight:600;font-size:13px}
.cempty{text-align:center;padding:56px 20px;margin-top:-56px;position:relative;display:none}
.cempty svg{width:120px;height:120px;margin-bottom:10px;animation:bob 5s ease-in-out infinite}
.cempty h2{font-size:22px}
.cempty p{color:var(--muted);margin:6px 0 20px}
.rec{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rec>*{min-width:0}
@media (max-width:1024px){
.rec{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
.cempty{margin-top:-48px}
.rec{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
.ct{grid-area:t;width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){
.cempty svg{animation:none}
}
.wsel{border:1.5px solid var(--bd);border-radius:8px;padding:9px 12px;font:inherit;font-size:12px;background:var(--grey);color:var(--dark)}
.wsel:focus{outline:0;border-color:var(--blue)}
.stock{font-size:11px;color:#22A06B;margin-top:8px}
.stock:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#22A06B;margin-right:6px}
.scard .off{left:10px;right:auto}
.scard .qa button.on{background:var(--pink);color:#fff}
.scard .qa button.on svg{fill:#fff}
.scard .cat2{font-size:10px;font-weight:600;color:var(--purple);text-transform:uppercase;letter-spacing:.06em;margin-left:6px}
.sadd{width:100%;justify-content:center;margin-top:12px;padding:10px;font-size:12px}
.card,.pc{cursor:pointer}
.stock.low{color:#B45309}
.stock.low:before{background:#F59E0B}
.stock.out{color:#DC2626}
.stock.out:before{background:#DC2626}
.img>.pimg{position:absolute;inset:0;padding:8px;box-sizing:border-box;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pc:hover .img>.pimg,.card:hover .img>.pimg{transform:scale(1.05)}
.ct .pimg{padding:3px;box-sizing:border-box}
.cempty{margin-top:0}
@media (max-width:768px){
.cempty{margin-top:0}
}
/* Uniform 4:3 product image ratio on every product card (carousel, best selling, new arrivals, shop, wishlist, related): photos run edge to edge, flush with the card (no inner padding, border or gap) */
.card>.img,.pc>.img{aspect-ratio:4/3!important;height:auto!important;min-height:0!important;position:relative;overflow:hidden}
.card>.img>.pimg,.pc>.img>.pimg{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-sizing:border-box}
.card>.img>svg,.pc>.img>svg{width:100%!important;height:100%!important;padding:8%;box-sizing:border-box;display:block}