/* WooCommerce Shop Reels - reels.css v3 - Theme Aware */

#woo-reels-root{
  --wr-accent: var(--wp-primary, var(--wp--preset--color--primary, #c6f135));
  --wr-bg: transparent;
  --wr-muted: #777;
  --cw: 175px;
  --ch: 300px;
  --gap: 10px;
  background: var(--wr-bg);
  padding: 40px 16px 60px;
  font-family: inherit;
  color: inherit;
}

.rs-header{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;padding:0 2px;}
.rs-header h2{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:900;letter-spacing:3px;color:var(--wr-accent);text-transform:uppercase;line-height:1;margin:0;}
.rs-header span{font-size:.72rem;color:var(--wr-muted);letter-spacing:1.5px;text-transform:uppercase;}

.rs-wrap{overflow:hidden;cursor:grab;padding:6px 0 12px;position:relative;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 5%,#000 95%,transparent 100%);}
.rs-wrap::-webkit-scrollbar{display:none;}
.rs-wrap.grabbing{cursor:grabbing;}
.rs-track{display:flex;gap:var(--gap);width:max-content;will-change:transform;}

.reel-card{width:var(--cw);height:var(--ch);border-radius:14px;overflow:hidden;position:relative;cursor:pointer;flex-shrink:0;border:1px solid rgba(128,128,128,.2);background:#141414;transition:transform .3s cubic-bezier(.22,.68,0,1.2),box-shadow .3s;}
.reel-card:hover{transform:scale(1.04) translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 0 1.5px var(--wr-accent);z-index:2;}
.reel-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.card-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 100%);pointer-events:none;}
.card-info{position:absolute;bottom:0;left:0;right:0;padding:10px;}
.card-title{font-size:.72rem;font-weight:600;color:#fff;line-height:1.3;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:50px;padding:2px 8px;font-size:.62rem;font-weight:600;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── MODAL ── */
.wr-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;}
.wr-modal-bg.open{opacity:1;pointer-events:all;}
.wr-modal-phone{width:min(100vw,400px);height:min(100vh,780px);height:min(100dvh,780px);border-radius:20px;overflow:hidden;position:relative;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.8);transform:scale(.94) translateY(16px);transition:transform .3s cubic-bezier(.22,.68,0,1.2);}
.wr-modal-bg.open .wr-modal-phone{transform:scale(1) translateY(0);}
.wr-viewer{width:100%;height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;}
.wr-viewer::-webkit-scrollbar{display:none;}

/* ── SLIDE ── */
.reel-slide{width:100%;height:100%;scroll-snap-align:start;position:relative;overflow:hidden;background:#111;flex-shrink:0;display:flex;flex-direction:column;}
.slide-media{flex:1;position:relative;overflow:hidden;min-height:0;}
.slide-media img,.slide-media video{width:100%;height:100%;object-fit:cover;display:block;}
.slide-grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 55%,rgba(0,0,0,.5) 100%);pointer-events:none;}
.slide-title-wrap{position:absolute;bottom:10px;left:12px;right:60px;z-index:4;pointer-events:none;}
.slide-title{font-size:.82rem;font-weight:700;color:#fff;line-height:1.4;text-shadow:0 1px 6px rgba(0,0,0,.8);}
.slide-actions{position:absolute;right:12px;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:16px;z-index:5;}
.act-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;color:#fff;padding:0;}
.act-btn svg{width:24px;height:24px;fill:rgba(255,255,255,.85);filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));transition:fill .2s,transform .2s;}
.act-btn span{font-size:.62rem;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);}
.act-btn.wishlisted svg{fill:#ff4d6d !important;transform:scale(1.2);}
.slide-controls{position:absolute;top:12px;right:12px;display:flex;gap:8px;z-index:10;}
.ctrl-btn{width:36px;height:36px;background:rgba(20,20,20,.7);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);border-radius:50%;color:#fff;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.ctrl-btn:hover{background:rgba(255,255,255,.2);}

/* ── PRODUCT STRIP ── */
.slide-product{flex-shrink:0;background:rgba(10,10,10,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.07);}
.prod-top{display:flex;align-items:center;gap:12px;padding:12px 14px 10px;}
.prod-thumb{width:58px;height:58px;border-radius:9px;object-fit:cover;background:#fff;flex-shrink:0;border:1px solid rgba(255,255,255,.12);}
.prod-details{flex:1;min-width:0;}
.prod-name{font-size:.82rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;line-height:1.3;}
.prod-stars{display:flex;align-items:center;gap:4px;margin-bottom:4px;}
.stars-wrap{color:#f5a623;font-size:.78rem;letter-spacing:.5px;}
.rev-count{font-size:.7rem;color:rgba(255,255,255,.42);}
.prod-price{font-size:.9rem;font-weight:800;color:#fff;letter-spacing:.2px;}
.prod-old{font-size:.68rem;color:rgba(255,255,255,.35);text-decoration:line-through;margin-left:4px;}
.prod-divider{height:1px;background:rgba(255,255,255,.07);margin:0 14px;}
.prod-btns{display:flex;}
.btn-atc{
  flex:1;border:none;
  padding:13px 8px;
  font-family:inherit;font-size:.8rem;font-weight:700;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:filter .2s,opacity .2s;
  background:rgba(255,255,255,.07);color:#fff;
  border-right:1px solid rgba(255,255,255,.07);
}
.btn-atc:active{background:rgba(255,255,255,.15);}
.btn-atc.added{background:#2e7d32;color:#fff;}

/* Buttons inherit theme styles — use WC default button classes */
.btn-view-product{
  flex:1;border:none;
  padding:13px 8px;
  font-family:inherit;font-size:.8rem;font-weight:700;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:filter .2s,opacity .2s;
  /* bg + color set inline by JS from theme detection */
}
.btn-view-product:hover{filter:brightness(1.1);}
.btn-view-product:active{filter:brightness(.92);}

/* ── TOAST ── */
.wr-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--wr-accent,#c6f135);color:#0a0a0a;font-size:.78rem;font-weight:700;padding:8px 18px;border-radius:50px;z-index:999999;opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.22,.68,0,1.2),opacity .25s;white-space:nowrap;}
.wr-toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

/* ── LOADING ── */
.wr-loading{text-align:center;color:var(--wr-muted);padding:60px 20px;font-size:.95rem;}
.wr-loading::before{content:'';display:block;width:32px;height:32px;border:3px solid rgba(128,128,128,.2);border-top-color:var(--wr-accent,#c6f135);border-radius:50%;animation:wr-spin .8s linear infinite;margin:0 auto 16px;}
@keyframes wr-spin{to{transform:rotate(360deg);}}
.wr-error,.wr-empty{text-align:center;color:var(--wr-muted);padding:40px 20px;font-size:.9rem;}
.wr-error{color:#ff6b6b;}

@media(max-width:600px){
  #woo-reels-root{--cw:148px;--ch:255px;}
  .wr-modal-phone{border-radius:0;width:100vw;height:100vh;height:100dvh;}
}