.shop-body.videos-directory-page .shop-main { width: min(calc(100% - 2 * var(--storefront-gutter, 24px)), var(--storefront-max-width, 1400px)) !important; margin-inline: auto; padding-inline: 0; }
.videos-directory { --video-text: #20282d; --video-muted: #606a72; --video-line: #dce2e3; --video-surface: #fff; --video-accent: #17654e; color: var(--video-text); padding: 24px 0 48px; scroll-margin-top: 170px; letter-spacing: 0; }
html[data-theme="dark"] .videos-directory { --video-text: #f0f2f3; --video-muted: #b6bec3; --video-line: #444d50; --video-surface: #242a2c; --video-accent: #91d8ba; }
.videos-directory a { color: inherit; text-decoration: none; }
.videos-directory a:focus-visible { outline: 2px solid var(--video-accent); outline-offset: 4px; }
.videos-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--video-muted); margin-bottom: 28px; }
.videos-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--video-line); }
.videos-heading h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.3; color: var(--video-text); letter-spacing: 0; }
.videos-heading p { margin: 0; font-size: 13px; color: var(--video-muted); }
.videos-heading p span { margin: 0 10px; }
.videos-channel-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--video-accent) !important; font-size: 14px; }
.videos-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 24px; margin-top: 28px; }
.video-directory-item { min-width: 0; overflow: hidden; border: 1px solid var(--video-line); border-radius: 6px; background: var(--video-surface); display: flex; flex-direction: column; }
.video-directory-player { aspect-ratio: 16 / 9; background: #101214; }
.video-directory-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-directory-copy { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 20px; }
.video-directory-copy > span { color: var(--video-muted); font-size: 12px; }
.video-directory-copy h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--video-text); overflow-wrap: anywhere; letter-spacing: 0; }
.video-directory-copy a { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; min-height: 36px; color: var(--video-accent); font-size: 13px; }
.video-directory-copy a:hover, .videos-channel-link:hover { text-decoration: underline; }
.videos-directory-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0; margin-top: 32px; border-top: 1px solid var(--video-line); }
.videos-directory-footer a { display: inline-flex; align-items: center; gap: 12px; color: var(--video-accent); font-size: 14px; min-height: 44px; }
.videos-empty { grid-column: 1 / -1; text-align: center; padding: 60px 16px; color: var(--video-muted); }
.videos-empty h2 { font-size: 18px; color: var(--video-text); }
@media (max-width: 1100px) { .videos-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 600px) { .videos-directory { padding-top: 16px; } .videos-heading { flex-direction: column; align-items: flex-start; gap: 12px; } .videos-heading h1 { font-size: 26px; } .videos-directory-grid { grid-template-columns: minmax(0, 1fr); } .videos-breadcrumb { margin-bottom: 20px; } }