/* Kapee Child — UGC reels strip + lightbox (brand stores + product pages) */

/* ===== Strip ===== */
.ogc-reels{position:relative;margin:36px 0;max-width:1120px}
.ogc-reels__head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.ogc-reels__title{margin:0;font-size:20px}
.ogc-reels__sub{display:block;font-size:13px;color:#6b7280;margin-top:2px}
.ogc-reels__nav{display:flex;gap:8px;flex:0 0 auto}
.ogc-reels__arrow{width:38px;height:38px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-size:18px;line-height:1;color:#222;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.ogc-reels__arrow:hover{background:#111;color:#fff}

.ogc-reels__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.ogc-reels__track::-webkit-scrollbar{display:none;width:0;height:0}

.ogc-reel{position:relative;flex:0 0 calc((100% - 42px) / 4);max-width:calc((100% - 42px) / 4);aspect-ratio:9/16;border:0;padding:0;cursor:pointer;border-radius:14px;overflow:hidden;background:#222 center/cover no-repeat;scroll-snap-align:start;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:inset 0 -70px 60px -30px rgba(0,0,0,.6)}
.ogc-reel__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ogc-reel__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-size:16px;padding-left:3px;z-index:1}
.ogc-reel__meta{position:relative;z-index:1;padding:10px;display:flex;flex-direction:column;gap:2px;text-align:left}
.ogc-reel__handle{font-size:13px;font-weight:600}
.ogc-reel__views{font-size:12px;opacity:.9}

@media(max-width:900px){
  .ogc-reel{flex-basis:calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3)} /* 3 up */
}
@media(max-width:600px){
  .ogc-reel{flex-basis:calc((100% - 14px) / 2);max-width:calc((100% - 14px) / 2)} /* 2 up */
  .ogc-reels__arrow{display:none} /* swipe on touch */
}

/* ===== Lightbox ===== */
.ogc-lb{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease}
.ogc-lb.is-open{opacity:1;visibility:visible}
.ogc-lb__stage{position:relative;width:min(92vw,420px);aspect-ratio:9/16;max-height:88vh;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ogc-lb__stage video,.ogc-lb__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;background:#000}
.ogc-lb__empty{color:#fff;display:flex;align-items:center;justify-content:center;height:100%;opacity:.6}
.ogc-lb__cap{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:13px;pointer-events:none;z-index:1}
.ogc-lb__close{position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:2}
.ogc-lb__close:hover{background:rgba(255,255,255,.3)}
.ogc-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:24px;line-height:1;cursor:pointer;align-items:center;justify-content:center;z-index:2}
.ogc-lb__nav:hover{background:rgba(255,255,255,.3)}
.ogc-lb__prev{left:16px}
.ogc-lb__next{right:16px}
@media(max-width:600px){.ogc-lb__nav{width:40px;height:40px;font-size:20px}}