.videos-header-row { grid-template-columns: auto 1fr auto; }
.videos-header-title { justify-self: center; display: grid; gap: 2px; text-align: center; }
.videos-header-title span { color: #69717c; font-size: 8px; letter-spacing: .16em; }
.videos-header-title strong { color: #ecece8; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.videos-shell { padding-top: 36px; padding-bottom: 70px; min-height: calc(100vh - 130px); }
.videos-hero { display: flex; justify-content: space-between; gap: 26px; align-items: end; padding: 8px 0 28px; border-bottom: 1px solid var(--line); }
.videos-hero h1 { max-width: 760px; margin: 10px 0 7px; color: #f2f2ee; font-size: clamp(30px, 5vw, 58px); line-height: .98; letter-spacing: -.055em; }
.videos-hero p { margin: 0; max-width: 590px; color: #858d97; font-size: 12px; line-height: 1.6; }
.videos-sort { min-width: 165px; display: grid; gap: 7px; }
.videos-sort span { color: #747c86; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.videos-sort select { height: 38px; border: 1px solid var(--line); color: #e8e9e7; background: #111419; padding: 0 10px; }
.videos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; padding-top: 28px; }
.video-card { min-width: 0; }
.video-card-cover { position: relative; display: block; width: 100%; aspect-ratio: 9 / 13; overflow: hidden; border: 1px solid #303640; background: radial-gradient(circle at 30% 20%, #252a32, #101318 62%); text-decoration: none; }
.video-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease, filter .25s ease; }
.video-card:hover .video-card-cover img { transform: scale(1.035); filter: brightness(1.04); }
.video-card-index { position: absolute; left: 9px; top: 9px; z-index: 2; padding: 5px 7px; background: rgba(242,242,238,.92); color: #111419; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.video-card-play { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.32); color: #fff; background: rgba(10,12,15,.68); backdrop-filter: blur(8px); font-size: 12px; }
.video-card-copy { padding-top: 11px; }
.video-card-date { color: #707985; font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }
.video-card h2 { margin: 7px 0 5px; color: #f0f0ed; font-size: 14px; line-height: 1.3; font-weight: 600; }
.video-card p { margin: 0; color: #858d97; font-size: 10px; }
.video-demo-cover { width: 100%; height: 100%; display: grid; place-items: center; color: #f0f0ed; font-size: 30px; font-weight: 800; letter-spacing: -.05em; background: radial-gradient(circle at 30% 20%, rgba(231,35,73,.2), transparent 34%), linear-gradient(145deg,#171b21,#0c0e11); }
.videos-back { margin: 0 0 22px; }
.video-detail-hero { display: grid; grid-template-columns: minmax(250px, .58fr) minmax(0, 1fr); gap: 34px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 34px; }
.video-detail-cover { aspect-ratio: 9 / 13; max-height: 650px; overflow: hidden; border: 1px solid #303640; background: #111419; }
.video-detail-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.video-detail-copy h1 { margin: 11px 0 11px; max-width: 760px; color: #f2f2ee; font-size: clamp(34px, 5vw, 66px); line-height: .96; letter-spacing: -.055em; }
.video-detail-copy p { color: #858d97; font-size: 12px; }
.video-detail-actions { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.video-detail-actions button[hidden] { display: none !important; }
.video-products-section { padding-top: 34px; }
.video-product-list { display: grid; gap: 8px; }
.video-product-row { display: grid; grid-template-columns: 44px 78px minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); background: #101318; padding: 8px 10px; }
.video-product-number { color: #65707c; font-size: 10px; letter-spacing: .1em; }
.video-product-thumb { width: 78px; aspect-ratio: 1 / 1; overflow: hidden; background: #171b21; }
.video-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-product-main { min-width: 0; }
.video-product-main strong { display: block; color: #f0f0ed; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-product-main small { display: flex; align-items: center; gap: 8px; margin-top: 5px; color: #858d97; font-size: 10px; }
.video-product-category { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border: 1px solid #353d47; color: #aeb7c0; background: #15191f; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.video-product-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.video-product-row a, .video-product-row button { min-height: 34px; padding: 0 11px; border: 1px solid #333a44; background: #15181d; color: #e8e9e7; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; }
.video-product-row .buy-kako { border-color: #ecece8; background: #ecece8; color: #111419; font-weight: 800; }
@media (max-width: 1080px) { .videos-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px) { .videos-header-row { grid-template-columns: 1fr auto; } .videos-header-title { display: none; } .videos-hero { align-items: stretch; flex-direction: column; } .videos-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .video-detail-hero { grid-template-columns: 1fr; } .video-detail-cover { width: min(76vw, 390px); } .video-product-row { grid-template-columns: 34px 58px minmax(0,1fr); } .video-product-thumb { width: 58px; } .video-product-actions { grid-column: 2 / -1; justify-content: flex-start; } }
@media (max-width: 520px) { .videos-grid { grid-template-columns: 1fr 1fr; gap: 22px 10px; } .video-product-row { grid-template-columns: 28px 52px minmax(0,1fr); } .video-product-thumb { width: 52px; } .video-product-actions { grid-column: 2 / -1; } .video-product-actions a, .video-product-actions button { flex: 1 1 auto; } }

/* V5.3 motion: video cards and linked products feel responsive without becoming flashy. */
@keyframes videoCardEnter {
  from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes videoRowEnter {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.video-card {
  animation: videoCardEnter 460ms var(--ease-pop, cubic-bezier(.16,1,.3,1)) both;
  animation-delay: var(--video-delay, 0ms);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 150ms ease;
}
.video-card:hover { transform: translateY(-5px); }
.video-card-cover { transition: border-color 160ms ease, box-shadow 260ms cubic-bezier(.2,.8,.2,1), transform 160ms cubic-bezier(.2,.8,.2,1); }
.video-card:hover .video-card-cover { border-color: #566170; box-shadow: 0 18px 34px rgba(0,0,0,.24); }
.video-card-cover:active { transform: scale(.985); }
.video-card-play { transition: transform 220ms cubic-bezier(.16,1,.3,1), background-color 160ms ease; }
.video-card:hover .video-card-play { transform: scale(1.08) rotate(-3deg); background: rgba(20,24,30,.86); }

.video-product-row {
  animation: videoRowEnter 360ms var(--ease-pop, cubic-bezier(.16,1,.3,1)) both;
  animation-delay: var(--row-delay, 0ms);
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), border-color 160ms ease, background-color 160ms ease, box-shadow 220ms ease;
}
.video-product-row:hover { transform: translateX(4px); border-color: #4a5562; background: #13171d; box-shadow: 0 10px 22px rgba(0,0,0,.14); }
.video-product-row a,
.video-product-row button { transition: transform 140ms cubic-bezier(.2,.8,.2,1), border-color 140ms ease, background-color 140ms ease, color 140ms ease; }
.video-product-row a:hover,
.video-product-row button:hover { transform: translateY(-1px); border-color: #657180; }
.video-product-row a:active,
.video-product-row button:active { transform: scale(.975); }

@media (prefers-reduced-motion: reduce) {
  .video-card,
  .video-product-row { animation: none !important; transition: none !important; }
  .video-card-cover,
  .video-card-cover img,
  .video-card-play,
  .video-product-row a,
  .video-product-row button { transition: none !important; }
}