.accordion{
  display:grid;
  gap:14px;
  padding:14px;
}
@media (min-width: 640px){
  .accordion{
    padding:22px;
  }
}

.acc-item{
  border-radius:14px;
  border:1px solid rgba(15, 23, 42, .08);
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 12px rgba(15, 23, 42, .06);
  transition:none;
}
@media (min-width: 640px){
  .acc-item{
    transition:all .3s cubic-bezier(.4, 0, .2, 1);
  }
  .acc-item:hover{
    box-shadow:0 8px 24px rgba(15, 23, 42, .12);
    transform:translateY(-1px);
  }
}

.acc-trigger{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:#fff;
  border:0;
  cursor:pointer;
  font-weight:750;
  color:#7a0000;
  text-align:left;
  font-size:15px;
  transition:none;
}
@media (min-width: 640px){
  .acc-trigger{
    background:linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(248,249,250,1) 100%);
    transition:all .3s cubic-bezier(.4, 0, .2, 1);
  }
  .acc-trigger:hover{
    background:linear-gradient(135deg, rgba(248,249,250,1) 0%, rgba(240,244,248,1) 100%);
  }
  .acc-trigger{
    gap:16px;
    padding:18px 20px;
    font-size:17px;
  }
}

.acc-trigger span{color:#111827}
.acc-trigger .chev{
  width:12px;
  height:12px;
  border-right:2.5px solid #991b1b;
  border-bottom:2.5px solid #991b1b;
  transform:rotate(45deg);
  transition:transform .3s cubic-bezier(.4, 0, .2, 1);
  margin-left:auto;
  opacity:.7;
}
.acc-trigger:hover .chev{
  opacity:1;
}

.acc-item[data-open="true"] .acc-trigger .chev{
  transform:rotate(-135deg);
}

.acc-panel{
  display:none;
  padding:0;
  background:linear-gradient(180deg, #f9fafb 0%, #f5f6f8 100%);
  border-top:2px solid rgba(15, 23, 42, .08);
  animation:slideDown .3s cubic-bezier(.4, 0, .2, 1);
}
.acc-item[data-open="true"] .acc-panel{display:block}

@keyframes slideDown{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.panel-inner{
  padding:12px;
}
@media (min-width: 640px){
  .panel-inner{
    padding:16px;
  }
}

.panel-header{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.panel-title{
  font-weight:850;
  color:#7a0000;
}

.product{
  display:grid;
  gap:14px;
  padding:14px;
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(15, 23, 42, .08);
  box-shadow:0 4px 12px rgba(15, 23, 42, .06);
  transition:none;
}
@media (min-width: 640px){
  .product{
    background:linear-gradient(135deg, rgba(255,255,255,1), rgba(248,250,252,1));
    transition:all .3s cubic-bezier(.4, 0, .2, 1);
  }
  .product:hover{
    box-shadow:0 8px 24px rgba(15, 23, 42, .12);
    transform:translateY(-2px);
  }
}

@media (min-width: 900px){
  .product{grid-template-columns: 1fr 1.3fr;}
}

.product__media{
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(15, 23, 42, .08);
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:10px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.02);
}
@media (min-width: 640px){
  .product__media{
    background:linear-gradient(135deg, rgba(255,255,255,1), rgba(250,252,254,1));
    box-shadow:inset 0 2px 8px rgba(0,0,0,.03);
  }
}

.product__media img{
  max-height:320px;
  object-fit:contain;
}

.product h3{
  margin:0 0 6px;
  color:#7a0000;
  font-weight:850;
}

.kicker{
  font-weight:850;
  color:#7a0000;
  margin:10px 0 4px;
}

ul{margin:6px 0 0 18px}

.spec{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  font-size:13px;
}
.spec th, .spec td{
  border:1px solid rgba(0,0,0,.08);
  padding:8px 10px;
  text-align:left;
}
.spec th{background:#f3f4f6}

.catalog{
  margin-top:10px;
}
.catalog a{
  color:#b00000;
  text-decoration:underline;
  font-weight:700;
}

.cards{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px){
  .cards{grid-template-columns: repeat(3, 1fr);}
}

@media (min-width: 900px){
  .cards{grid-template-columns: repeat(4, 1fr);}
}

.tile{
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(15, 23, 42, .08);
  box-shadow:0 10px 18px rgba(15, 23, 42, .06);
  padding:12px;
  display:grid;
  gap:10px;
  text-align:center;
}

.tile img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit:contain;
  background:#fff;
  border-radius:12px;
}

.tile__title{
  font-weight:850;
  font-size:12px;
  color:#111827;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.yt-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  color:#c90000;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  vertical-align:middle;
}

.yt-mark{
  width:24px;
  height:17px;
  border-radius:5px;
  background:#ff0000;
  display:inline-grid;
  place-items:center;
  color:#fff;
  font-size:10px;
  line-height:1;
}