/* This page borrows the store's teal/navy, with one clear numbered product grid. */
/* Only the video landing page trims the shared header; logo, search and the
   affiliate notice remain in normal flow and available without JavaScript. */
body[data-storefront-page="videos"] > .checklist-bar,
body[data-storefront-page="videos"] .site-header .hub-navigation { display: none; }
body[data-storefront-page="videos"] .masthead { min-height: 80px; padding-block: 8px; }
body[data-storefront-page="videos"] main { padding-top: 8px; }
.videos-page { --video-accent: #174f49; padding-top: 2px; }
.video-page-intro { max-width: 760px; margin: 0 auto 12px; text-align: center; }
.video-page-intro h1 { margin: 2px 0 6px; font-size: clamp(29px, 4.5vw, 44px); line-height: 1.08; letter-spacing: -.035em; }
.video-page-intro p { color: #526460; font-size: 14px; line-height: 1.5; }
.video-page-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 680px; margin: 0 auto; }
.video-page-search label { flex: 0 0 100%; font-size: 13px; font-weight: 700; color: var(--ink); }
.video-page-search input { flex: 1 1 0; min-width: 0; width: 100%; min-height: 54px; border: 2px solid #34766c; border-radius: 12px; background: #fff; padding: 12px 15px; color: var(--navy); font: inherit; font-size: 17px; }
.video-page-search input::placeholder { color: #667674; opacity: 1; }
.video-page-search input:focus-visible { outline: 3px solid #9cc9b7; outline-offset: 3px; }
.video-page-search input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.video-page-search button { flex: none; min-width: 44px; min-height: 48px; border: 1px solid #cad8d0; border-radius: 10px; background: #fff; color: var(--video-accent); padding: 10px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.video-page-checklist { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 680px; margin: 8px auto 10px; padding: 6px 12px; border-radius: 10px; background: #e8f0e9; color: #255b50; font-size: 12px; line-height: 1.4; }
.video-page-checklist a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
#video-results-count { margin: 0 0 10px; color: #5b6c67; font-size: 12px; line-height: 1.4; }
#video-no-results { padding: 28px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; text-align: center; color: #526460; }
.video-product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.video-card { display: flex; flex-direction: column; position: relative; min-width: 0; overflow: hidden; border: 1px solid #d6dfd8; border-radius: 15px; background: #fff; scroll-margin-top: 16px; box-shadow: 0 2px 6px #20343b05; }
.video-card.is-video-match { outline: 4px solid #34766c; outline-offset: 3px; box-shadow: 0 0 0 8px #dceee6; }
.video-number-badge { position: absolute; top: 11px; left: 11px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; min-width: 62px; min-height: 49px; padding: 7px 11px; background: #123b3c; color: #fff; border: 2px solid #fff; border-radius: 11px; font-size: 27px; font-weight: 850; line-height: 1; letter-spacing: -.04em; box-shadow: 0 2px 8px #0f2a4426; pointer-events: none; }
.video-card-media { position: relative; height: 196px; min-width: 0; background: #fff; }
.video-card-media .product-media { height: 100%; padding: 0; }
.video-card-media .catalog-photo { height: 100%; width: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: #fff; }
.video-card-media .catalog-photo-image { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.video-card-media [data-video-preview] { position: absolute; inset: 0; pointer-events: none; }
.video-card-media video { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: contain; background: #fff; pointer-events: none; }
.video-card-media [data-video-preview-toggle] { position: absolute; right: 10px; bottom: 10px; z-index: 4; min-width: 94px; min-height: 44px; padding: 8px 12px; border: 1px solid #cfddd3; border-radius: 10px; background: #fffffff2; color: #174f49; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; pointer-events: auto; }
.video-card-copy { display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px 16px; border-top: 1px solid #edf1ec; }
.video-card-copy h2, .video-card-copy h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; word-break: normal; overflow-wrap: normal; margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
.video-card-copy > p { margin: 0; color: #596b66; font-size: 12px; line-height: 1.5; }
.video-card-copy .card-offer { margin: 1px 0 0; }
.video-card-copy .card-price-line .offer-price { font-size: 27px; }
.video-card-copy .card-price-fallback { font-size: 15px; font-weight: 650; }
.video-card-copy .card-retailer-line { min-height: 18px; }
.video-card-copy .amazon-price-notice summary { min-height: 32px; font-size: 10px; }
.video-card-actions { display: flex; align-items: flex-start; gap: 10px; margin-top: auto; padding-top: 4px; }
.video-card-retailers { flex: 1; min-width: 0; }
.video-card-retailers [data-offer-action] { margin: 0; padding: 0; border: 0; background: transparent; }
.video-card-retailers [data-offer-priority="secondary"] { display: none; }
.video-card-retailers .button { display: flex; align-items: center; justify-content: center; min-height: 46px; width: 100%; padding: 10px 12px; border: 1px solid #216c63; border-radius: 10px; background: #216c63; color: #fff; font-size: 13px; line-height: 1.3; text-align: center; }
.video-card-retailers .button:hover { background: #174f49; border-color: #174f49; }
.video-card-retailers .amazon-affiliate-disclosure { font-size: 10px; line-height: 1.4; margin-top: 6px; }
.video-card-details { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 72px; min-height: 46px; padding: 10px 4px; border: 0; color: #174f49; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; line-height: 1.3; font-weight: 750; }
.video-card-related { border-top: 1px solid #edf1ec; padding-top: 7px; font-size: 11px; line-height: 1.5; }
.videos-page [hidden] { display: none !important; }
.videos-page a:focus-visible, .videos-page button:focus-visible { outline: 3px solid #34766c; outline-offset: 3px; }
@media (max-width: 1023px) {
  body[data-storefront-page="videos"] .masthead { grid-template-rows: 44px 48px; min-height: 0; gap: 8px; padding-block: 6px; }
  body[data-storefront-page="videos"] .masthead .brand { min-height: 44px; }
}
@media (min-width: 768px) {
  .video-page-intro { margin-bottom: 20px; }
  .video-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .video-card-media { height: 230px; }
  .video-card-copy { padding: 18px; }
}
@media (min-width: 1200px) {
  .video-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-card-media { height: 220px; }
}
@media (max-width: 374px) {
  .video-page-intro h1 { font-size: 27px; }
  .video-page-search input { font-size: 16px; padding-inline: 10px; }
  .video-page-checklist { flex-wrap: wrap; gap: 2px 6px; }
  .video-card-actions { gap: 7px; }
  .video-card-retailers .button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-card { scroll-behavior: auto; }
}
/* Embedded social browsers use owned demo posters with an ordinary Details
   link. The retailer image remains separate and is not the poster's target. */
.video-card-demo-poster { position: absolute; inset: 0; z-index: 2; display: block; background: #fff; }
.video-card-demo-poster img { width: 100%; height: 100%; object-fit: contain; }
.video-card-media.is-in-app-video > .catalog-photo { display: none; }
.video-card-media.is-in-app-video [data-video-preview-toggle] { min-width: 44px; width: 44px; padding: 8px; border-radius: 50%; }