/* similar-feed-0918 — immersive "Similar products" feed (full-screen overlay, appended to ). Layout only: colors for .btn/.card-trust come from the shared brand tokens in style.css so "Chat now" stays AJAW purple. */ /* ---- pill decorated onto the PDP main photo --------------------------- */ .sf-pdp-pill{position:absolute;left:10px;bottom:12px;z-index:3;display:inline-flex;align-items:center; gap:6px;padding:7px 12px 7px 9px;border-radius:20px;border:0;background:rgba(9,9,11,.55); color:#fff;font-size:11px;font-weight:650;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .sf-pdp-pill .icon{width:15px;height:15px} .sf-pdp-pill:hover{background:rgba(9,9,11,.72)} /* ---- overlay shell ------------------------------------------------------ */ .similar-feed{position:fixed;inset:0;z-index:2000;background:#000;display:flex;flex-direction:column; color:#fff} .similar-feed *{box-sizing:border-box} .sf-topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:10px; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px; background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%);pointer-events:none} .sf-topbar>*{pointer-events:auto} .sf-back{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center; background:rgba(9,9,11,.5);color:#fff} .sf-back .icon{width:20px;height:20px;transform:rotate(180deg)} .sf-search-pill{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px; height:36px;padding:0 8px 0 14px;border-radius:20px;background:rgba(255,255,255,.94);color:#141018; font-size:12px} .sf-search-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-search-pill b{font-weight:650} .sf-search-pill .icon{flex:none;width:16px;height:16px;color:var(--violet,#3e34f9)} /* ---- vertical, snap-scrolling track ------------------------------------ */ .sf-track{flex:1;height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory; overscroll-behavior:y contain;-webkit-overflow-scrolling:touch;outline:none} .sf-slide{scroll-snap-align:start;scroll-snap-stop:always;height:100dvh;width:100%;display:flex; flex-direction:column;position:relative} .sf-photo{flex:1;min-height:0;position:relative;background:#000;display:flex;align-items:center; justify-content:center;overflow:hidden;cursor:pointer} .sf-img{width:100%;height:100%;object-fit:contain;background:#000} .sf-tag{position:absolute;left:12px;top:calc(64px + env(safe-area-inset-top,0px));display:inline-flex; align-items:center;gap:6px;padding:6px 10px;border-radius:16px;background:rgba(9,9,11,.55); color:#fff;font-size:11px;font-weight:600;pointer-events:none} .sf-tag .icon{width:14px;height:14px} /* ---- bottom info panel -------------------------------------------------- */ .sf-panel{flex:none;background:#fff;color:var(--ink,#09090b);border-radius:16px 16px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px)); box-shadow:0 -6px 24px rgba(0,0,0,.28)} .sf-price{display:block;font-family:var(--display,inherit);font-size:20px;font-weight:700;color:var(--violet,#3e34f9)} .sf-price-was{margin-left:8px;font-size:13px;font-weight:500;color:var(--muted,#8a8fa3);text-decoration:line-through} .sf-price-off{margin-left:6px;font-size:12px;font-weight:700;color:#e8483a} .sf-moq{margin:4px 0 0;font-size:12px;color:var(--gray,#5b5f73)} .sf-moq b{color:var(--ink,#09090b)} .sf-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; margin:8px 0 0;font-size:14px;line-height:1.4;font-weight:600;color:var(--ink,#09090b)} .sf-title:hover{text-decoration:underline} .sf-supplier{display:flex;align-items:center;gap:10px;margin-top:12px} .sf-supplier-mark{flex:none;width:30px;height:30px;border-radius:8px;background:var(--tint,#eeedfe); color:var(--violet,#3e34f9);display:grid;place-items:center;font-size:11px;font-weight:700;overflow:hidden} .sf-supplier-mark.has-img{background:#fff;border:1px solid var(--line,#e7e8f0)} .sf-supplier-mark img{width:100%;height:100%;object-fit:contain} .sf-supplier-text{min-width:0} .sf-supplier-text b{display:block;font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:260px} .sf-supplier-text .card-trust{margin-top:2px} .sf-actions{display:flex;gap:10px;margin-top:14px} .sf-actions .btn{flex:1;height:44px;border-radius:22px;font-size:13px;font-weight:650; display:flex;align-items:center;justify-content:center} .sf-actions .btn.outline{background:#fff;color:var(--violet,#3e34f9);border:1.5px solid var(--violet,#3e34f9)} /* ---- desktop: dark backdrop, centered 440px column ---------------------- */ @media (min-width:820px){ .similar-feed{background:rgba(6,4,16,.92)} .sf-topbar{left:50%;transform:translateX(-50%);width:440px;max-width:calc(100% - 32px)} .sf-track{width:440px;max-width:calc(100% - 32px);margin:0 auto;height:min(880px,100dvh); border-radius:0;box-shadow:0 30px 90px rgba(0,0,0,.5)} .sf-slide{height:min(880px,100dvh)} } @media (max-width:819px){ .sf-panel{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))} }