.tpop{--tpop-red:#e34338;--tpop-per:var(--tpop-desktop,3);--tpop-gap:16px;position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .25s}
.tpop[hidden]{display:none}
.tpop.is-open{opacity:1;visibility:visible}
.tpop__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tpop__wrap{position:relative;display:flex;flex-direction:column;width:100%;max-width:var(--tpop-width,1200px);max-height:100%}
.tpop__box{position:relative;background:#fff;border-radius:8px;flex:1 1 auto;min-height:0;overflow:auto;padding:24px 28px 16px;box-sizing:border-box;transform:translateY(12px);transition:transform .25s}
.tpop.is-open .tpop__box{transform:none}
.tpop__close{position:absolute;top:16px;right:16px;width:38px;height:38px;border:0;border-radius:50%;background:var(--tpop-red);color:#fff;font-size:24px;line-height:1;cursor:pointer;z-index:3;padding:0}

.tpop__intro{text-align:center;margin-bottom:20px}
.tpop__intro :is(h1,h2,h3,h4){margin:0 0 8px;text-transform:uppercase;line-height:1.1!important}
.tpop__intro p{margin:0;color:#666}

.tpop__slider{position:relative}
.tpop__track{display:flex;gap:var(--tpop-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tpop__track::-webkit-scrollbar{display:none}
.tpop__item{flex:0 0 calc((100% - (var(--tpop-per) - 1) * var(--tpop-gap)) / var(--tpop-per));scroll-snap-align:start;min-width:0}
.tpop__card{height:100%;display:flex;flex-direction:column;border:1px solid #eee;border-radius:6px;overflow:hidden;background:#fff}
.tpop__img{background:#f3f4f6;text-align:center;line-height:0}
.tpop__img img{display:block;width:100%;height:auto}
.tpop__text{padding:14px 15px 0;flex:1}
.tpop__text p{margin:0 0 6px;line-height:1.5}
.tpop :is(.tpop__text,.tpop__intro,.tpop__note) br{display:initial!important;content:normal}
.tpop__btn{display:block;margin:15px;padding:12px;background:var(--tpop-red);color:#fff;text-align:center;font-weight:700;text-transform:uppercase;text-decoration:none;border-radius:999px}
.tpop__btn:hover{background:#121212;color:#fff}

.tpop__arrow{position:absolute;top:40%;transform:translateY(-50%);width:36px;height:36px;border:0;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.25);border-radius:50%;cursor:pointer;z-index:2;padding:0}
.tpop__arrow::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border:solid var(--tpop-red);border-width:2px 2px 0 0}
.tpop__arrow--prev{left:-14px}.tpop__arrow--prev::after{transform:translate(-30%,-50%) rotate(-135deg)}
.tpop__arrow--next{right:-14px}.tpop__arrow--next::after{transform:translate(-70%,-50%) rotate(45deg)}
.tpop__arrow[disabled]{opacity:.35;cursor:default}
.tpop:not(.has-slider) :is(.tpop__arrow,.tpop__dots){display:none}

.tpop__dots{display:flex;justify-content:center;gap:8px;margin:14px 0 4px}
.tpop__dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#ccc;cursor:pointer}
.tpop__dots button.is-active{background:var(--tpop-red)}

.tpop__footer{margin-top:12px;font-size:12px;text-align:center}
.tpop__note,.tpop__note *{color:#888!important;text-align:center!important}
.tpop__note p{margin:0}
.tpop__dismiss{flex:none;align-self:center;margin-top:12px;color:#fff;font-size:13px;text-decoration:underline}
.tpop__dismiss:hover{color:#fff;opacity:.8}

@media (max-width:1024px){.tpop{--tpop-per:var(--tpop-tablet,2)}}
@media (max-width:640px){
	.tpop{--tpop-per:var(--tpop-mobile,1);padding:24px 22px}
	.tpop__box{padding:18px 34px 12px}
	.tpop__close{top:8px;right:8px}
	.tpop__img{background:#fff}
	.tpop__img img{width:100%;height:max(180px,calc(100vh - 500px));height:max(180px,calc(100svh - 500px));object-fit:cover;object-position:center}
	.tpop__intro :is(h1,h2,h3,h4){line-height:1.05!important;padding-right:20px}
	.tpop__btn{white-space:nowrap;font-size:clamp(10px,3.8vw,16px);padding:12px 6px}
	.tpop__arrow--prev{left:-28px}.tpop__arrow--next{right:-28px}
}
@media (max-width:480px){
	.tpop__box{padding:18px 14px 12px}
	.tpop__arrow--prev{left:-6px}.tpop__arrow--next{right:-6px}
}