.tta-v4{
width:min(100%,980px);
margin:20px auto;
padding:0 8px;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:#172033;
}
.tta-v4-card{
position:relative;
overflow:hidden;
display:grid;
grid-template-columns:116px minmax(0,1fr) 190px;
gap:18px;
align-items:center;
min-height:158px;
padding:20px;
border:1px solid #e8e3d8;
border-radius:20px;
background:
radial-gradient(circle at 0 0,rgba(255,153,0,.11),transparent 34%),
#fff;
box-shadow:0 10px 30px rgba(20,30,50,.10);
}
.tta-v4-card.is-changing .tta-v4-media,
.tta-v4-card.is-changing .tta-v4-copy,
.tta-v4-card.is-changing .tta-v4-cta{
opacity:0;
transform:translateY(6px);
}
.tta-v4-media,.tta-v4-copy,.tta-v4-cta{
transition:opacity .19s ease,transform .19s ease;
}
.tta-v4-media{
width:108px;
height:108px;
display:grid;
place-items:center;
overflow:hidden;
border-radius:17px;
border:1px solid #ece8df;
background:#f8f6f0;
}
.tta-v4-image{
width:100%;
height:100%;
object-fit:contain;
background:#fff;
}
.tta-v4-placeholder{font-size:52px}
.tta-v4-eyebrow{
margin-bottom:6px;
color:#8a5a00;
font-size:.74rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.tta-v4-title{
margin:0 0 6px;
color:#172033;
font-size:clamp(1.05rem,2vw,1.34rem);
line-height:1.22;
}
.tta-v4-description{
margin:0;
color:#667085;
font-size:.94rem;
line-height:1.45;
}
.tta-v4-meta{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:9px;
}
.tta-v4-context,.tta-v4-price{
display:inline-block;
padding:4px 8px;
border-radius:999px;
background:#fff8ea;
color:#8a5a00;
font-size:.7rem;
font-weight:750;
}
.tta-v4-price{
background:#eef8f0;
color:#256a3d;
}
.tta-v4-cta{
display:flex;
flex-direction:column;
gap:8px;
}
.tta-v4-button{
display:inline-flex;
justify-content:center;
align-items:center;
min-height:46px;
padding:12px 16px;
border:1px solid rgba(0,0,0,.08);
border-radius:13px;
background:#ff9900;
box-shadow:0 4px 0 rgba(0,0,0,.10);
color:#111827 !important;
text-decoration:none !important;
font-weight:800;
}
.tta-v4-button:hover{
background:#ffad22;
transform:translateY(-1px);
}
.tta-v4-disclosure,.tta-v4-freshness{
color:#7b8290;
font-size:.68rem;
line-height:1.3;
text-align:center;
}
.tta-v4-controls{
position:absolute;
top:9px;
right:10px;
display:flex;
gap:5px;
}
.tta-v4-control{
width:31px;
height:31px;
display:grid;
place-items:center;
padding:0;
border:1px solid #ded9cf;
border-radius:50%;
background:rgba(255,255,255,.92);
color:#5b6472;
cursor:pointer;
font-size:15px;
}
.tta-v4-progress{
position:absolute;
left:0;
bottom:0;
width:100%;
height:3px;
background:#eee9df;
}
.tta-v4-progress span{
display:block;
width:0;
height:100%;
background:#ff9900;
}
.tta-v4.is-loading .tta-v4-card{
opacity:.82;
}
@media(max-width:720px){
.tta-v4-card{
grid-template-columns:82px minmax(0,1fr);
gap:13px;
padding:16px 13px 19px;
}
.tta-v4-media{
width:78px;
height:78px;
border-radius:14px;
}
.tta-v4-placeholder{font-size:40px}
.tta-v4-cta{
grid-column:1/-1;
}
.tta-v4-button{width:100%}
.tta-v4-controls{
top:8px;
right:8px;
}
}
@media(prefers-reduced-motion:reduce){
.tta-v4 *{
transition:none !important;
animation:none !important;
}
} .tta-v4-card.is-loading .tta-v4-cta{
opacity:.45;
}
.tta-v4-skeleton{
display:block;
position:relative;
overflow:hidden;
border-radius:10px;
background:#eeeae2;
}
.tta-v4-skeleton::after{
content:"";
position:absolute;
inset:0;
transform:translateX(-100%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
animation:tta-v41-shimmer 1.4s infinite;
}
.tta-v4-skeleton-media{
width:100%;
height:100%;
border-radius:17px;
}
.tta-v4-skeleton-title{
width:min(360px,78%);
height:21px;
margin-bottom:8px;
}
.tta-v4-skeleton-line{
width:min(520px,95%);
height:12px;
margin-top:7px;
}
.tta-v4-skeleton-line.short{
width:min(360px,66%);
}
.tta-v4-media.no-image{
background:
radial-gradient(circle at 28% 28%,rgba(255,153,0,.15),transparent 32%),
linear-gradient(145deg,#fff8ed,#f4efe6);
}
.tta-v4-media.no-image::before{
content:"Road trip";
display:grid;
place-items:center;
width:72px;
height:72px;
border:1px solid rgba(23,25,28,.08);
border-radius:18px;
background:rgba(255,255,255,.8);
color:#7f5a2c;
font-size:.68rem;
font-weight:850;
letter-spacing:.04em;
text-transform:uppercase;
}
.tta-v4-card:not(.is-loading) .tta-v4-skeleton{
display:none;
}
.tta-v4-button.is-disabled{
pointer-events:none;
opacity:.5;
}
.tta-v4-error{
grid-column:1/-1;
padding:22px;
color:#667085;
text-align:center;
}
@keyframes tta-v41-shimmer{
to{transform:translateX(100%)}
}
@media(prefers-reduced-motion:reduce){
.tta-v4-skeleton::after{animation:none}
}