/* ============================================================
   PURE KARET JEWELLERY — COLLECTIONS PAGE
   Videos inside existing category cards (small grid)
   ============================================================ */

/* Ensure the category-card handles video properly */
.category-card.video-card {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.category-card.video-card .category-card-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pk-off-white);
}

/* Video fills the image area */
.category-card.video-card .card-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 1s ease;
  pointer-events: none;
}

/* Poster image sits behind (fallback if video missing) */
.category-card.video-card .card-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 1s ease;
}

/* Hover zoom */
.category-card.video-card:hover .card-video,
.category-card.video-card:hover .card-poster {
  transform: scale(1.06);
}

/* Info section stays the same */
.category-card.video-card .category-card-info {
  position: relative;
  z-index: 2;
}

/* ============================================================
   HIDE CHROME'S FLOATING MEDIA CONTROLS BUTTON
   (Picture-in-Picture, play overlay, etc.)
   ============================================================ */

.card-video::-webkit-media-controls,
.card-video::-webkit-media-controls-enclosure,
.card-video::-webkit-media-controls-panel,
.card-video::-webkit-media-controls-play-button,
.card-video::-webkit-media-controls-start-playback-button,
.card-video::-webkit-media-controls-overlay-play-button,
.card-video::-webkit-media-controls-toggle-closed-captions-button,
.card-video::-webkit-media-controls-volume-slider,
.card-video::-webkit-media-controls-mute-button,
.card-video::-webkit-media-controls-timeline,
.card-video::-webkit-media-controls-current-time-display,
.card-video::-webkit-media-controls-time-remaining-display,
.card-video::-webkit-media-controls-fullscreen-button,
.card-video::-webkit-media-controls-rewind-button,
.card-video::-webkit-media-controls-return-to-realtime-button,
.card-video::-webkit-media-controls-toggle-closed-captions-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* Hide any video element's native controls globally in cards */
.card-video::-internal-media-controls-download-button,
.card-video::-internal-media-controls-overflow-button {
  display: none !important;
}

/* Ensure video never shows controls attribute's UI */
.card-video[controls] {
  pointer-events: none;
}

/* Responsive — no changes needed, inherits from style.css */