#recentProducts[hidden] { display: none; }
#recentProducts { margin: 28px 0; padding: 24px 0; border-block: 1px solid var(--border, #ffffff26); scroll-margin-top: var(--kok-scroll-offset, 160px); }
.recent-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.recent-heading h2 { margin: 0 0 6px; color: var(--text); font: 700 clamp(20px, 3vw, 26px)/1.5 var(--font-body); }
.recent-heading h2::before { content: ''; display: inline-block; width: 4px; height: .9em; background: #ff3b1f; margin-right: 10px; }
#recentProductsNote { margin: 0; font-size: 13px; color: var(--muted); }
#recentProductsClear { flex-shrink: 0; min-height: 44px; padding: 8px 14px; border: 1px solid var(--border, #ffffff40); border-radius: 8px; background: transparent; color: var(--text); font: 600 13px var(--font-body); cursor: pointer; }
#recentProductsList { display: flex; gap: 14px; overflow-x: auto; padding: 3px 3px 14px; margin: 0; list-style: none; scroll-snap-type: x proximity; scrollbar-color: #ff3b1f #ffffff15; }
#recentProductsList > li { flex: 0 0 206px; min-width: 0; scroll-snap-align: start; }
.recent-product { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: stretch; padding: 12px; border: 1px solid #ffffff26; border-radius: 12px; background: #141416ed; color: #fff; text-align: left; font-family: var(--font-body); cursor: pointer; }
.recent-product-media { display: flex; align-items: center; justify-content: center; height: 116px; margin-bottom: 12px; border-radius: 7px; background: #fff; color: #555; font-size: 12px; overflow: hidden; }
.recent-product-media img { width: 100%; height: 100%; object-fit: contain; }
.recent-product-name { font-size: 15px; font-weight: 700; line-height: 1.6; min-height: 3.2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.recent-product-code { margin-top: 7px; font: 700 13px/1.6 ui-monospace, monospace; overflow-wrap: anywhere; }
.recent-product-fit { margin: 6px 0 12px; min-height: 3em; font-size: 12px; line-height: 1.5; color: #bbb; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.recent-product-action { margin-top: auto; padding-top: 10px; border-top: 1px solid #ffffff20; color: #ffb09e; font-size: 13px; font-weight: 700; }
.recent-product:hover { border-color: #ff3b1f; }
.recent-product:focus-visible, #recentProductsClear:focus-visible { outline: 2px solid #ffcc00; outline-offset: 2px; }
html[data-theme="light"] .recent-product { background: #fffffff5; color: #202024; border-color: #d7d7dd; }
html[data-theme="light"] .recent-product-fit { color: #555; }
html[data-theme="light"] .recent-product-action { color: #b9230d; border-color: #ddd; }
.recent-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 600px) { .recent-heading { align-items: flex-start; flex-wrap: wrap; gap: 8px; } #recentProductsList > li { flex-basis: 176px; } .recent-product-media { height: 104px; } }