/* === CHECKOUT LAYOUT === */
.checkout-layout{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
.checkout-main{min-width:0;padding:0 16px}
.checkout-side{min-width:0}
.checkout-side .rec-section-hdr{font-size:14px;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--red)}
.checkout-side .rec-grid{display:grid!important;grid-template-columns:1fr;gap:8px;overflow-x:visible;scroll-snap-type:none;max-height:70vh;overflow-y:auto}
.checkout-side .rec-grid>.rec-card,
.checkout-side .rec-card{min-width:0!important;max-width:none!important;width:100%;flex-direction:row;gap:0;border:1px solid var(--g100);box-shadow:none}
/* Hide the slider chevrons inside checkout sidebar (no horizontal scroll there) */
.checkout-side .rec-nav-btn{display:none!important}
.checkout-side .rec-card:hover{box-shadow:var(--shadow-sm);border-color:var(--g300)}
.checkout-side .rec-card-img{width:64px;min-width:64px;aspect-ratio:1;border-bottom:none;border-right:1px solid var(--g100)}
.checkout-side .rec-card-body{padding:8px 10px}
.checkout-side .rec-card-name{font-size:11px;-webkit-line-clamp:1;margin-bottom:4px}
.checkout-side .rec-card-price{font-size:13px;font-weight:700;margin-bottom:4px;margin-top:auto}
.checkout-side .rec-card-btn{padding:5px 8px;font-size:10px;border-radius:4px}
.checkout-side .rec-card-sku{font-size:9px;margin-bottom:1px}

/* === MEDIUM FINDER === */
.mf-widget{background:var(--g0);border:1.5px solid var(--g200);border-radius:14px;padding:24px 28px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.home-section-hdr{font-size:24px;font-weight:700;margin-bottom:4px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.mf-header{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.mf-icon{width:36px;height:36px;background:var(--red-light);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--red);font-size:16px;flex-shrink:0}
.mf-title{font-size:16px;font-weight:700;color:var(--g900)}
.mf-subtitle{font-size:12px;color:var(--g400);margin-top:1px}
.mf-search-row{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.mf-input-wrap{flex:1;position:relative}
.mf-input{width:100%;padding:10px 40px 10px 14px;border:2px solid var(--g200);border-radius:var(--r);font-size:14px;outline:none;background:var(--g50);transition:all var(--t);height:42px;box-sizing:border-box}
.mf-input:focus{border-color:var(--red);background:var(--g0);box-shadow:0 0 0 4px var(--red-glow)}
.mf-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--g400);font-size:14px;cursor:pointer;padding:4px;display:none}
.mf-dropdown{position:fixed;background:var(--g0);border:1.5px solid var(--g200);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:99999;max-height:260px;overflow-y:auto;display:none}
.mf-opt{padding:9px 14px;cursor:pointer;font-size:13px;color:var(--g700);transition:background .1s;display:flex;align-items:center;gap:8px}
.mf-opt:hover{background:var(--g50)}
.mf-opt-sym{font-size:11px;color:var(--g400);font-family:monospace;flex-shrink:0}
.mf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.mf-chip{padding:4px 12px;border-radius:20px;border:1.5px solid var(--g200);background:var(--g0);font-size:12px;color:var(--g600);cursor:pointer;transition:all var(--t)}
.mf-chip:hover{border-color:var(--red);color:var(--red)}
.mf-chip.active{border-color:var(--red);background:var(--red);color:#fff}
.mf-results{margin-top:4px}
.mf-cat-hdr{font-size:12px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.05em;margin:16px 0 10px;display:flex;align-items:center;gap:8px}
.mf-cat-hdr::after{content:'';flex:1;height:1px;background:var(--g200)}
.mf-empty{text-align:center;padding:24px;color:var(--g400);font-size:13px}
.mf-loading{text-align:center;padding:20px;color:var(--g400);font-size:13px}
@media(max-width:600px){.mf-widget{padding:16px;}.mf-search-row{flex-direction:column;align-items:stretch}}

/* === SEARCH GRID === */
.srch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:4px 0 16px}
.srch-grid .rec-card{min-width:0;max-width:none;width:100%}

/* === RECOMMENDATIONS === */
.rec-section{margin-bottom:24px;max-width:100%;overflow:hidden}
.rec-section-hdr{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
/* Rec slider */
.rec-slider-wrap{position:relative;max-width:100%}
.rec-grid{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px 2px 12px;scrollbar-width:none;max-width:100%;scroll-snap-type:x proximity}
.rec-grid::-webkit-scrollbar{display:none}
.rec-grid>.rec-card{min-width:200px;max-width:200px;flex-shrink:0;scroll-snap-align:start}
/* Intuitive prev/next chevrons rendered into .rec-slider-wrap by JS */
.rec-nav-btn{position:absolute;top:calc(50% - 14px);transform:translateY(-50%);z-index:5;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--g200);box-shadow:0 4px 12px rgba(0,0,0,.12);color:var(--g700);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--t);padding:0}
.rec-nav-btn:hover{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 4px 16px rgba(226,0,26,.3)}
.rec-nav-btn.prev{left:6px}
.rec-nav-btn.next{right:6px}
.rec-nav-btn[hidden]{display:none}
.rec-card{background:#fff;border-radius:var(--r);border:1px solid var(--g200);overflow:hidden;transition:all var(--t);display:flex;flex-direction:column;min-width:0}
.rec-card:hover{box-shadow:var(--shadow-md);border-color:var(--red)}
.rec-card-img{width:100%;aspect-ratio:1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--g100);cursor:pointer}
.rec-card-img img{width:100%;height:100%;object-fit:contain}
.rec-card-body{padding:10px;flex:1;display:flex;flex-direction:column}
.rec-card-sku{font-size:10px;color:var(--red);font-weight:600;font-family:monospace;margin-bottom:2px}
.rec-card-name{font-size:12px;font-weight:500;color:var(--g800);line-height:1.3;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rec-card-price{font-size:14px;font-weight:700;margin-bottom:6px;margin-top:auto}
.rec-card-btn{width:100%;padding:7px;border:none;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:all var(--t)}
.rec-card-btn.order{background:var(--red);color:#fff}.rec-card-btn.order:hover{background:var(--red-dark)}
.rec-card-btn.enquiry{background:var(--g800);color:#fff}.rec-card-btn.enquiry:hover{background:var(--g700)}
.rec-nav{position:absolute;top:50%;transform:translateY(-70%);width:32px;height:32px;border-radius:50%;background:var(--g0);border:1px solid var(--g200);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;font-size:12px;color:var(--g600);transition:all var(--t)}
.rec-nav:hover{border-color:var(--red);color:var(--red);box-shadow:var(--shadow-md)}
.rec-nav.left{left:-12px}
.rec-nav.right{right:-12px}
.rec-spinner{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--g400);gap:8px;font-size:13px}