/* ================================================================
   TikTok Video Shop  v4.0  —  Stylesheet
   Desktop: Split view — left reel | right info panel
   Mobile:  Full-screen vertical feed (unchanged)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Variables ──────────────────────────────────────────────── */
:root {
    --tvs-accent:      #fe2c55;
    --tvs-accent2:     #25f4ee;
    --tvs-dark:        #0a0a0a;
    --tvs-text:        #111111;
    --tvs-text-muted:  #666666;
    --tvs-border:      #e8e8e8;
    --tvs-surface:     #ffffff;
    --tvs-bg:          #f5f5f5;
    --tvs-radius:      14px;
    --tvs-radius-btn:  999px;
    --tvs-font-head:   'Sora',    system-ui, sans-serif;
    --tvs-font-body:   'DM Sans', system-ui, sans-serif;
    --tvs-ease:        cubic-bezier(.4, 0, .2, 1);
    --tvs-spring:      cubic-bezier(.34, 1.56, .64, 1);
    --tvs-icon-btn:    44px;
}

/* ── Base reset ─────────────────────────────────────────────── */
.tvs-split-wrap *, .tvs-mobile-wrap *,
.tvs-reel-feed *, .tvs-info-panel *,
.tvs-toast { box-sizing: border-box; }


/* ════════════════════════════════════════════════════════════
   DESKTOP SPLIT WRAPPER
════════════════════════════════════════════════════════════ */
.tvs-split-wrap {
    display:     flex;
    align-items: stretch;
    min-height:  90vh;
    max-height:  90vh;
    width:       100%;
    overflow:    hidden;
    font-family: var(--tvs-font-body);
}


/* ── LEFT: Reel column ──────────────────────────────────────── */
.tvs-reel-col {
    width:           42%;
    flex-shrink:     0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    background:      #000;
    position:        relative;
}

/* Up / Down arrows */
.tvs-reel-nav {
    flex-shrink:      0;
    width:            100%;
    height:           40px;
    background:       rgba(0,0,0,.7);
    border:           none;
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       background .2s var(--tvs-ease);
    z-index:          20;
}
.tvs-reel-nav:hover { background: rgba(255,255,255,.12); }
.tvs-reel-nav:active { background: rgba(255,255,255,.18); }
.tvs-reel-nav svg {
    width:          26px;
    height:         26px;
    fill:           #ffffff;
    display:        block;
    pointer-events: none;
}

/* Scroll container */
.tvs-reel-feed {
    flex:               1;
    width:              100%;
    overflow-y:         scroll;
    overflow-x:         hidden;
    scroll-snap-type:   y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:    none;
    background:         #000;
}
.tvs-reel-feed::-webkit-scrollbar { display: none; }


/* ── RIGHT: Info panel ──────────────────────────────────────── */
.tvs-info-panel {
    flex:             1;
    display:          flex;
    flex-direction:   column;
    justify-content:  flex-start;
    padding:          32px 36px 28px;
    background:       var(--tvs-surface);
    border-left:      1px solid var(--tvs-border);
    overflow-y:       auto;
    scrollbar-width:  thin;
    gap:              0;
    /* Slide-in animation on product change */
    transition:       opacity .25s var(--tvs-ease);
}
.tvs-info-panel.updating { opacity: 0; }

/* Sale badge */
.tvs-panel-badge {
    display:         inline-block;
    background:      #fff0f3;
    color:           #c0243c;
    font-family:     var(--tvs-font-head);
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    padding:         4px 12px;
    border-radius:   var(--tvs-radius-btn);
    border:          1px solid #f5c0cc;
    margin-bottom:   14px;
    width:           fit-content;
}
.tvs-panel-badge[hidden] { display: none; }

/* Title */
.tvs-panel-title {
    margin:       0 0 8px;
    font-family:  var(--tvs-font-head);
    font-size:    22px;
    font-weight:  700;
    color:        var(--tvs-text);
    line-height:  1.25;
}

/* Star rating */
.tvs-panel-rating {
    display:     flex;
    align-items: center;
    gap:         3px;
    margin-bottom: 14px;
}
.tvs-star {
    width:  14px;
    height: 14px;
    fill:   #f59e0b;
    display: block;
}
.tvs-star--empty { fill: #e0e0e0; }
.tvs-rating-count {
    font-size:  12px;
    color:      var(--tvs-text-muted);
    margin-left: 4px;
}

/* Price */
.tvs-panel-price {
    font-family:   var(--tvs-font-head);
    font-size:     26px;
    font-weight:   700;
    color:         var(--tvs-text);
    margin-bottom: 14px;
    display:       flex;
    align-items:   baseline;
    gap:           10px;
    flex-wrap:     wrap;
}
.tvs-panel-price del {
    font-size:       15px;
    color:           var(--tvs-text-muted);
    text-decoration: line-through;
    font-weight:     400;
}
.tvs-panel-price ins     { text-decoration: none; }
.tvs-panel-price .woocommerce-Price-amount { color: inherit; }

/* Description */
.tvs-panel-desc {
    margin:      0 0 18px;
    font-size:   14px;
    color:       var(--tvs-text-muted);
    line-height: 1.65;
}

/* Image thumbnails */
.tvs-panel-thumbs {
    display:       flex;
    gap:           8px;
    margin-bottom: 20px;
    flex-wrap:     wrap;
}
.tvs-panel-thumb {
    width:         52px;
    height:        52px;
    border-radius: 8px;
    object-fit:    cover;
    border:        2px solid transparent;
    cursor:        pointer;
    transition:    border-color .2s var(--tvs-ease), transform .2s var(--tvs-spring);
}
.tvs-panel-thumb:hover { border-color: var(--tvs-accent); transform: scale(1.05); }
.tvs-panel-thumb.active { border-color: var(--tvs-accent); }

/* Divider */
.tvs-panel-divider {
    border:        none;
    border-top:    1px solid var(--tvs-border);
    margin:        0 0 20px;
}

/* CTA buttons */
.tvs-panel-cta {
    display:       flex;
    gap:           12px;
    margin-bottom: 16px;
}

.tvs-btn {
    flex:        1;
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    gap:         7px;
    font-family: var(--tvs-font-head);
    font-size:   14px;
    font-weight: 700;
    border:      none;
    border-radius: var(--tvs-radius-btn);
    padding:     13px 20px;
    cursor:      pointer;
    text-decoration: none;
    white-space: nowrap;
    min-width:   0;
    transition:  transform .18s var(--tvs-spring),
                 box-shadow .18s var(--tvs-ease),
                 background .15s;
    -webkit-tap-highlight-color: transparent;
}
.tvs-btn svg { width: 16px; height: 16px; fill: currentColor; display: block; flex-shrink: 0; pointer-events: none; }
.tvs-btn:active { transform: scale(.95); }

.tvs-btn--cart {
    background: var(--tvs-accent);
    color:      #fff;
    box-shadow: 0 4px 20px rgba(254,44,85,.35);
}
.tvs-btn--cart:hover { box-shadow: 0 6px 28px rgba(254,44,85,.55); }
.tvs-btn--buy {
    background: var(--tvs-text);
    color:      #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.tvs-btn--buy:hover { background: #333; }
.tvs-btn--oos {
    background:     #f0f0f0;
    color:          #aaa;
    cursor:         not-allowed;
    pointer-events: none;
}
.tvs-btn--variable {
    background: #f7f7f7;
    color:      var(--tvs-text);
    border:     1px solid var(--tvs-border);
}
.tvs-btn--variable:hover { background: #eee; }

.tvs-btn.loading { opacity: .65; pointer-events: none; }
.tvs-btn.loading::after {
    content: '';
    display: block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tvs-spin .55s linear infinite;
}
@keyframes tvs-spin { to { transform: rotate(360deg); } }

/* Chip actions */
.tvs-panel-chips {
    display:  flex;
    gap:      10px;
    flex-wrap:wrap;
    margin-bottom: 24px;
}

.tvs-chip {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    padding:     8px 16px;
    background:  #f7f7f7;
    border:      1px solid var(--tvs-border);
    border-radius: 8px;
    font-family: var(--tvs-font-body);
    font-size:   13px;
    font-weight: 600;
    color:       var(--tvs-text-muted);
    cursor:      pointer;
    text-decoration: none;
    transition:  background .15s, border-color .15s, color .15s, transform .15s var(--tvs-spring);
}
.tvs-chip:hover { background: #efefef; border-color: #ccc; color: var(--tvs-text); }
.tvs-chip:active { transform: scale(.96); }
.tvs-chip svg {
    width:  15px;
    height: 15px;
    fill:   currentColor;
    display: block;
    pointer-events: none;
}
/* Wishlist active */
.tvs-chip-wishlist.active {
    background:   #fff0f3;
    border-color: #f5c0cc;
    color:        var(--tvs-accent);
}
@keyframes tvs-heartbeat {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.4); }
    60%  { transform: scale(.92); }
    100% { transform: scale(1); }
}
.tvs-chip-wishlist.pulse { animation: tvs-heartbeat .4s var(--tvs-ease); }

/* Product counter */
.tvs-panel-counter {
    margin:    0;
    font-size: 12px;
    color:     #bbb;
    font-family: var(--tvs-font-body);
}


/* ════════════════════════════════════════════════════════════
   REEL SLIDES  (inside .tvs-reel-feed)
════════════════════════════════════════════════════════════ */
.tvs-slide {
    position:         relative;
    width:            100%;
    height:           calc(90vh - 80px); /* full feed minus two nav bars */
    scroll-snap-align: start;
    scroll-snap-stop:  always;
    overflow:         hidden;
    flex-shrink:      0;
    background:       #111;
}

/* Media */
.tvs-slide__media { position: absolute; inset: 0; }
.tvs-slide__video,
.tvs-slide__iframe {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* Image carousel */
.tvs-slide__carousel { position: absolute; inset: 0; }
.tvs-slide__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s var(--tvs-ease);
    will-change: opacity;
}
.tvs-slide__img.active { opacity: 1; }

.tvs-slide__dots {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 5px; z-index: 20;
}
.tvs-slide__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    transition: all .25s var(--tvs-ease);
}
.tvs-slide__dot.active {
    background: #fff; width: 18px; border-radius: 3px;
}

/* Gradients */
.tvs-slide__grad-top {
    position: absolute; top: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
    z-index: 4; pointer-events: none;
}
.tvs-slide__grad-bot {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 35%;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
    z-index: 4; pointer-events: none;
}

/* Mute button */
.tvs-mute-btn {
    position:     absolute;
    top:          12px; right: 12px;
    z-index:      30;
    width:        var(--tvs-icon-btn);
    height:       var(--tvs-icon-btn);
    border-radius:50%;
    border:       2px solid rgba(255,255,255,.5);
    background:   rgba(0,0,0,.7);
    cursor:       pointer;
    display:      flex;
    align-items:  center;
    justify-content: center;
    box-shadow:   0 2px 10px rgba(0,0,0,.5);
    transition:   transform .2s var(--tvs-spring), background .15s;
}
.tvs-mute-btn:hover  { background: rgba(0,0,0,.9); border-color: #fff; }
.tvs-mute-btn:active { transform: scale(.88); }
.tvs-mute-btn svg {
    width: 20px; height: 20px;
    fill: #ffffff; display: block;
    flex-shrink: 0; pointer-events: none;
}
.tvs-mute-btn .tvs-icon-mute { display: none; }
.tvs-mute-btn.muted .tvs-icon-sound { display: none; }
.tvs-mute-btn.muted .tvs-icon-mute  { display: block; }

/* Progress bar */
.tvs-slide__progress {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; z-index: 20;
    background: rgba(255,255,255,.2);
}
.tvs-slide__progress-fill {
    height: 100%; width: 0%;
    background: var(--tvs-accent);
    transition: width .1s linear;
}

/* Slide counter pill */
.tvs-slide__counter {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: rgba(0,0,0,.5);
    color: rgba(255,255,255,.8);
    font-family: var(--tvs-font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--tvs-radius-btn);
    white-space: nowrap;
    pointer-events: none;
}


/* ════════════════════════════════════════════════════════════
   MOBILE FEED  (full-screen, shown only on ≤600px)
════════════════════════════════════════════════════════════ */
.tvs-mobile-wrap { display: none; }

.tvs-feed--mobile {
    width: 100%; height: 90vh;
    overflow-y: scroll; overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #000;
}
.tvs-feed--mobile::-webkit-scrollbar { display: none; }

.tvs-feed--mobile .tvs-slide {
    height: 90vh;
    /* Restore full-slide overlay info for mobile */
}

/* Mobile: action bar + info overlay (only on mobile feed) */
.tvs-feed--mobile .tvs-slide__actions {
    position:  absolute;
    right:     12px;
    bottom:    210px;
    z-index:   40;
    display:   flex;
    flex-direction: column;
    align-items: center;
    gap:       16px;
}
.tvs-feed--mobile .tvs-action-btn {
    display:    flex;
    flex-direction: column;
    align-items:center;
    gap:        4px;
    background: none;
    border:     none;
    cursor:     pointer;
    color:      #fff;
    padding:    0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s var(--tvs-spring);
}
.tvs-feed--mobile .tvs-action-btn:active { transform: scale(.82); }
.tvs-feed--mobile .tvs-action-icon {
    width: var(--tvs-icon-btn); height: var(--tvs-icon-btn);
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.tvs-feed--mobile .tvs-action-icon svg {
    width: 22px; height: 22px;
    fill: #fff; display: block;
    pointer-events: none;
}
.tvs-feed--mobile .tvs-wishlist-btn.active .tvs-action-icon { background: rgba(254,44,85,.25); border-color: var(--tvs-accent); }
.tvs-feed--mobile .tvs-wishlist-btn.active .tvs-action-icon svg { fill: var(--tvs-accent); }
.tvs-feed--mobile .tvs-wishlist-btn.pulse .tvs-action-icon { animation: tvs-heartbeat .42s var(--tvs-ease); }

.tvs-feed--mobile .tvs-action-label {
    font-size: 10px; font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
    white-space: nowrap;
}

/* Mobile bottom info */
.tvs-feed--mobile .tvs-slide__info {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 40;
    padding: 0 16px 28px;
    display: flex; flex-direction: column; gap: 5px;
}
.tvs-feed--mobile .tvs-slide__price {
    font-family: var(--tvs-font-head); font-size: 18px; font-weight: 700;
    color: var(--tvs-accent2);
    text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.tvs-feed--mobile .tvs-slide__price del { font-size: 13px; color: rgba(255,255,255,.45); text-decoration: line-through; }
.tvs-feed--mobile .tvs-slide__price ins { text-decoration: none; }
.tvs-feed--mobile .tvs-slide__price .woocommerce-Price-amount { color: inherit; }
.tvs-feed--mobile .tvs-slide__title {
    margin: 0; font-family: var(--tvs-font-head);
    font-size: 16px; font-weight: 700; color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.tvs-feed--mobile .tvs-slide__title a { color: inherit; text-decoration: none; }
.tvs-feed--mobile .tvs-slide__desc {
    margin: 0; font-size: 12px;
    color: rgba(255,255,255,.7);
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tvs-feed--mobile .tvs-slide__cta {
    display: flex; gap: 10px; margin-top: 8px;
}
.tvs-feed--mobile .tvs-btn--cart {
    background: var(--tvs-accent); color: #fff;
    box-shadow: 0 4px 18px rgba(254,44,85,.5);
}
.tvs-feed--mobile .tvs-btn--buy {
    background: #fff; color: #000;
}

/* Safe-area for notch phones */
.tvs-feed--mobile .tvs-slide__actions {
    bottom: calc(200px + env(safe-area-inset-bottom, 0px));
}
.tvs-feed--mobile .tvs-slide__info {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}


/* ════════════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════════════ */
.tvs-toast {
    position:   fixed;
    bottom:     32px; left: 50%;
    transform:  translateX(-50%) translateY(16px);
    z-index:    999999;
    background: #111;
    color:      #fff;
    font-family:var(--tvs-font-body);
    font-size:  13px; font-weight: 600;
    padding:    10px 22px;
    border-radius: var(--tvs-radius-btn);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    border:     1px solid rgba(255,255,255,.1);
    opacity:    0; pointer-events: none;
    transition: opacity .28s var(--tvs-ease), transform .28s var(--tvs-ease);
    white-space: nowrap; max-width: 88vw; text-align: center;
}
.tvs-toast.show    { opacity: 1; transform: translateX(-50%) translateY(0); }
.tvs-toast.success { border-color: #25f4ee; }
.tvs-toast.error   { border-color: var(--tvs-accent); }
.tvs-toast.info    { border-color: rgba(255,255,255,.3); }

.tvs-no-products {
    text-align: center; color: #aaa;
    font-family: var(--tvs-font-body); padding: 40px;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (min-width: 601px) {
    /* Tablet: stack vertically */
    .tvs-split-wrap { flex-direction: column; max-height: none; min-height: auto; }
    .tvs-reel-col   { width: 100%; height: 60vw; min-height: 340px; }
    .tvs-info-panel { padding: 20px 20px 24px; }
}

@media (max-width: 600px) {
    .tvs-split-wrap  { display: none; }
    .tvs-mobile-wrap { display: block; }
    .tvs-feed--mobile {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 90vh; z-index: 1000;
    }
    body.admin-bar .tvs-feed--mobile {
        top: var(--wp-admin--admin-bar--height, 32px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tvs-btn, .tvs-chip, .tvs-slide__img,
    .tvs-mute-btn, .tvs-reel-nav { transition: none; }
}