.smb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.smb-nav { display: flex; gap: 10px; flex: none; }
.smb-btn { width: 52px; height: 52px; border-radius: 9999px; background: #fff; border: 1px solid rgba(29,74,75,.22); color: #1d4a4b; display: flex; align-items: center; justify-content: center; transition: background-color .2s, border-color .2s, color .2s; }
.smb-btn:hover { background: #1d4a4b; border-color: #1d4a4b; color: #fff; }
.smb-btn:disabled { opacity: .35; cursor: default; }
.smb-btn:disabled:hover { background: #fff; border-color: rgba(29,74,75,.22); color: #1d4a4b; }
.smb-btn svg { width: 22px; height: 22px; }
.smb-strip { display: flex; align-items: flex-start; gap: clamp(20px, 2.6 * var(--cvw), 48px); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.smb-strip::-webkit-scrollbar { display: none; }
.smb-card { position: relative; margin: 0; flex: 0 0 auto; display: table; scroll-snap-align: start; }
.smx-media { position: relative; overflow: hidden; background: #efece7; }
.smx-media--box { height: min(clamp(400px, 52vh, 540px), calc(86 * var(--cvw) / var(--arn, .5625))); border-radius: 1.5rem; }
.smb-card--reel .smx-media--box { aspect-ratio: 9 / 16; --arn: .5625; }
.smb-card--post .smx-media--box { aspect-ratio: 4 / 5; --arn: .8; }
.smx-media .lightbox-trigger { position: relative; display: block; width: 100%; height: 100%; }
.smx-media img, .smx-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
html.overlay-open .smx-media video { transform: translateZ(0); }
.smxs { position: relative; display: flex; height: 100%; overflow-x: hidden; scroll-snap-type: x mandatory; }
.smxs__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.smxs__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: var(--gnoise), rgba(29,74,75,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; transition: background-color .2s, opacity .2s; }
.smxs__btn:hover { background: var(--gnoise), rgba(0,115,166,.95); }
.smxs__btn:disabled { opacity: .25; cursor: default; }
.smxs__btn:disabled:hover { background: var(--gnoise), rgba(29,74,75,.78); }
.smxs__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #1d4a4b; }
.smxs__btn--prev { left: 10px; }
.smxs__btn--next { right: 10px; }
.smxs__btn svg { width: 20px; height: 20px; }
.smxs__count { position: absolute; top: 12px; right: 12px; padding: 5px 11px; border-radius: 9999px; background: var(--gnoise), rgba(29,74,75,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.smx-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9999px; background: var(--gnoise), rgba(29,74,75,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none; }
.smx-badge svg { width: 14px; height: 14px; }
.smx-cap { display: table-caption; caption-side: bottom; margin: 14px 2px 0; }
.smx-cap__t { display: -webkit-box; width: 100%; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; color: #3f3f46; font-size: 15px; line-height: 1.45; min-height: calc(1.45em * 2); }
html.reduce-motion .smxs__btn { transition: none; }