main .ml-recs { width:100%; box-sizing:border-box; margin:18px 0 24px; padding:20px 16px 12px; background:#f4f7fb; border:1px solid #dce5ee; border-radius:12px; font-family:Arial,sans-serif; color:#263a4b; }
.ml-recs * { box-sizing:border-box; }
.ml-recs .ml-recs__heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
.ml-recs .ml-recs__eyebrow { font-size:10px; font-weight:700; letter-spacing:1.3px; color:#5884ac; }
.ml-recs h2 { font-family:Arial,sans-serif; font-size:23px; line-height:29px; color:#233e55; margin:5px 0; padding:0; font-weight:700; }
.ml-recs .ml-recs__heading p { margin:0; font-size:12px; line-height:18px; color:#75818d; }
.ml-recs .ml-recs__badge { flex-shrink:0; color:#386a96; background:#e6eef8; border-radius:20px; padding:8px 10px; font-size:10px; }
.ml-recs .ml-recs__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.ml-recs .ml-recs__card { min-width:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid #e4eaf0; border-radius:10px; background:#fff; transition:box-shadow .15s,transform .15s; }
.ml-recs .ml-recs__card:hover { box-shadow:0 5px 16px #20496b18; transform:translateY(-2px); }
.ml-recs .ml-recs__photo { display:flex; align-items:center; justify-content:center; position:relative; height:146px; padding:10px; background:#fff; }
.ml-recs .ml-recs__photo img { display:block; width:100%; height:100%; object-fit:contain; margin:0; border:0; }
.ml-recs .ml-recs__body { display:flex; flex-direction:column; flex:1; padding:10px; }
.ml-recs .ml-recs__price { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin:0 0 7px; font-size:19px; font-weight:700; color:#243d52; }
.ml-recs .ml-recs__price s { color:#939eaa; font-size:10px; font-weight:400; }
.ml-recs a.ml-recs__title { color:#354a5c; font-size:12px; line-height:17px; text-decoration:none; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:51px; }
.ml-recs a.ml-recs__title:hover { color:#206195; }
.ml-recs a.ml-recs__seller { display:flex; align-items:center; gap:5px; margin-top:11px; text-decoration:none; font-size:10px; color:#7a8794; overflow-wrap:anywhere; }
.ml-recs .ml-recs__seller-dot { width:5px; height:5px; border-radius:50%; background:#7da1bd; flex-shrink:0; }
.ml-recs .ml-recs__reason { margin-top:9px; padding-top:8px; border-top:1px solid #eef1f5; font-size:9px; line-height:13px; color:#598068; }
.ml-recs .ml-recs__discount { position:absolute; bottom:8px; left:8px; color:#fff; background:#377fa9; border-radius:5px; padding:4px 6px; font-size:10px; font-weight:bold; }
.ml-recs .ml-recs__footnote { margin:12px 0 0; color:#8b96a0; font-size:10px; line-height:15px; }
@media(max-width:650px) { main .ml-recs { padding:15px 10px 10px; } .ml-recs .ml-recs__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .ml-recs .ml-recs__badge { display:none; } .ml-recs h2 { font-size:21px; } .ml-recs .ml-recs__photo { height:160px; } }

/* Compact horizontal carousel: five visible cards, two on phones. */
main .ml-recs { padding:12px 12px 9px; margin:16px 0 20px; border-radius:8px; }
.ml-recs .ml-recs__heading { margin-bottom:11px; }
.ml-recs .ml-recs__eyebrow { display:none; }
.ml-recs h2 { font-size:19px; line-height:24px; margin:0 0 3px; }
.ml-recs .ml-recs__heading p { font-size:11px; line-height:16px; }
.ml-recs .ml-recs__grid { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px)/5); gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 0 3px; }
.ml-recs .ml-recs__grid::-webkit-scrollbar { display:none; }
.ml-recs .ml-recs__card { border-radius:7px; scroll-snap-align:start; }
.ml-recs .ml-recs__card:hover { transform:none; box-shadow:none; border-color:#a9c4da; }
.ml-recs .ml-recs__photo { height:100px; padding:7px; }
.ml-recs .ml-recs__body { padding:8px; }
.ml-recs .ml-recs__price { font-size:16px; margin-bottom:5px; }
.ml-recs a.ml-recs__title { font-size:11px; line-height:15px; min-height:30px; -webkit-line-clamp:2; }
.ml-recs a.ml-recs__seller { font-size:10px; margin-top:8px; }
.ml-recs .ml-recs__reason { display:none; }
.ml-recs .ml-recs__footnote { margin-top:7px; font-size:9px; line-height:13px; }
.ml-recs .ml-recs__controls { display:flex; flex-shrink:0; gap:6px; }
.ml-recs .ml-recs__controls button { display:flex; align-items:center; justify-content:center; width:29px; height:29px; padding:0; margin:0; border:1px solid #c7d7e5; border-radius:50%; background:#fff; color:#326699; font:24px/1 Arial,sans-serif; cursor:pointer; }
.ml-recs .ml-recs__controls button:disabled { opacity:.35; cursor:default; }
.ml-recs .ml-recs__controls button:focus-visible, .ml-recs .ml-recs__grid:focus-visible { outline:2px solid #326699; outline-offset:2px; }
@media(max-width:650px) { main .ml-recs { padding:12px 10px 8px; } .ml-recs .ml-recs__grid { grid-template-columns:none; grid-auto-columns:calc((100% - 8px)/2); gap:8px; } .ml-recs .ml-recs__photo { height:110px; } .ml-recs h2 { font-size:18px; } }