/* UTT Premium — grid + on-page cart
   Uses the site's global --ut-* brand tokens with safe fallbacks. */

/* ---------------------------------------------------------------- grid */
.utt-grid{display:grid;gap:26px;margin:0 0 34px}
.utt-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.utt-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.utt-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.utt-grid.cols-1{grid-template-columns:minmax(0,520px);justify-content:center}
@media(max-width:1100px){.utt-grid.cols-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.utt-grid.cols-4,.utt-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .utt-grid.cols-4,.utt-grid.cols-3,.utt-grid.cols-2,.utt-grid.cols-1{grid-template-columns:1fr}
}

.utt-card{
  border:1px solid var(--ut-bd,#232a35);
  border-radius:12px;
  overflow:hidden;
  background:var(--ut-surf,#12161d);
  display:flex;
  flex-direction:column;
}
.utt-card:hover{border-color:var(--ut-gold,#f0b90b)}
.utt-card .utt-thumb-link{display:block;line-height:0}
.utt-card .utt-thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center}
.utt-card .utt-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.utt-card .utt-tag{
  display:inline-block;
  background:rgba(240,185,11,.12);
  color:var(--ut-gold,#f0b90b);
  border-radius:20px;
  padding:4px 11px;
  font-size:.72em;
  font-weight:600;
  margin-bottom:10px;
  align-self:flex-start;
}
.utt-card h3{margin:0 0 8px;font-size:1.05em;line-height:1.35;color:#fff}
.utt-card h3 a{color:#fff!important;text-decoration:none}
.utt-card h3 a:hover{color:var(--ut-gold,#f0b90b)!important}
.utt-card .utt-sum{font-size:.89em;color:var(--ut-mut,#8b95a5);margin:0 0 12px;line-height:1.55}
.utt-card .utt-price{font-size:1.25em;font-weight:700;color:var(--ut-gold,#f0b90b);margin:0 0 12px}
.utt-card .utt-price del{color:var(--ut-mut,#8b95a5);font-weight:400;font-size:.7em;margin-right:6px}
.utt-card .utt-price ins{text-decoration:none;color:var(--ut-gold,#f0b90b)}

.utt-card details{border-top:1px solid var(--ut-bd,#232a35);padding-top:11px;margin-bottom:14px;font-size:.86em}
.utt-card summary{
  cursor:pointer;
  color:var(--ut-gold,#f0b90b);
  font-weight:600;
  list-style:none;
  -webkit-user-select:none;
  user-select:none;
}
.utt-card summary::-webkit-details-marker{display:none}
.utt-card summary:before{content:"\25B8  "}
.utt-card details[open] summary:before{content:"\25BE  "}
.utt-card details .utt-full{margin-top:10px;max-height:340px;overflow-y:auto;padding-right:6px}
.utt-card details .utt-full h3{font-size:.98em;color:#dfe7f0;margin:14px 0 6px}
.utt-card details .utt-full h3:first-child{margin-top:0}
.utt-card details .utt-full p{margin:0 0 9px;color:#9fadbe;line-height:1.6}
.utt-card details .utt-full ul{margin:0 0 9px 18px;padding:0}
.utt-card details .utt-full li{margin-bottom:5px;color:#9fadbe}
.utt-card details .utt-full strong{color:#dfe7f0}

.utt-card .utt-buy{
  display:block;
  text-align:center;
  background:var(--ut-gold,#f0b90b);
  color:#0c1119!important;
  padding:12px 16px;
  border-radius:7px;
  text-decoration:none;
  font-weight:700;
  font-size:.93em;
  margin-top:auto;
  border:0;
  cursor:pointer;
}
.utt-card .utt-buy:hover{background:var(--ut-gold2,#ffd34d);color:#0c1119!important}
.utt-card .added_to_cart{display:block;text-align:center;margin-top:9px;font-size:.85em}
.utt-card .utt-view{
  display:block;
  text-align:center;
  margin-top:9px;
  font-size:.83em;
  color:var(--ut-mut,#8b95a5)!important;
  text-decoration:none;
}
.utt-card .utt-view:hover{color:var(--ut-gold,#f0b90b)!important}

/* ---------------------------------------------------------------- cart */
.utt-cart-box{
  background:var(--ut-surf2,#171c24);
  border:1px solid var(--ut-bd,#232a35);
  border-radius:14px;
  padding:22px 24px;
  margin:6px 0 34px;
}
.utt-cart-h{margin:0 0 14px;color:#fff;font-size:1.15em}
.utt-cart-empty{color:var(--ut-mut,#8b95a5);margin:0;font-size:.94em}
.utt-cart-list{list-style:none;margin:0 0 8px;padding:0}
.utt-cart-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--ut-bd,#232a35);
}
.utt-cart-name{flex:1;font-size:.93em;line-height:1.4}
.utt-cart-price{color:var(--ut-gold,#f0b90b);font-weight:700;white-space:nowrap}
.utt-cart-rm{color:var(--ut-mut,#8b95a5)!important;text-decoration:none;font-size:1.35em;line-height:1;padding:0 4px}
.utt-cart-rm:hover{color:#ff6b6b!important}
.utt-cart-total{display:flex;justify-content:space-between;align-items:center;padding:14px 0 16px;font-size:1.05em}
.utt-cart-total strong{color:var(--ut-gold,#f0b90b);font-size:1.15em}
.utt-cart-actions{display:flex;gap:12px;flex-wrap:wrap}
.utt-btn-gold{
  background:var(--ut-gold,#f0b90b);
  color:#0c1119!important;
  padding:13px 22px;
  border-radius:7px;
  text-decoration:none;
  font-weight:700;
  flex:1;
  text-align:center;
  min-width:190px;
}
.utt-btn-gold:hover{background:var(--ut-gold2,#ffd34d);color:#0c1119!important}
.utt-btn-ghost{
  border:1px solid var(--ut-bd2,#2c3542);
  color:var(--ut-tx,#eaecef)!important;
  padding:13px 22px;
  border-radius:7px;
  text-decoration:none;
  font-weight:600;
  text-align:center;
  min-width:120px;
}
.utt-btn-ghost:hover{border-color:var(--ut-gold,#f0b90b);color:var(--ut-gold,#f0b90b)!important}
.utt-cart-note{color:var(--ut-mut,#8b95a5);font-size:.83em;margin:14px 0 0;line-height:1.5}