:root{
        --primary:#ff2d55;
        --glass-bg:rgba(71,71,73,0.58);
        --glass-border:rgba(255,255,255,0.25);
        --glass-shadow:rgba(0,0,0,0.45);
        --glass-blur:22px;
        --text:#ffffff;
        --muted:#c8c8c8;
    }

    html, body{
        margin:0;
        padding:0;
        height:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    /* موبایل: ریل تمام‌صفحه مثل اینستاگرام — body.rewall-pdp-reels از show.blade */
    @media (max-width: 767.98px) {
        body.rewall-pdp-reels {
            overflow: hidden !important;
            overscroll-behavior: none;
        }
        body.rewall-pdp-reels .app,
        body.rewall-pdp-reels .product-seo-app {
            margin-bottom: 0 !important;
            min-height: 0 !important;
            max-width: 100% !important;
            overflow-x: hidden !important;
        }
        body.rewall-pdp-reels header.app-mobile-header,
        body.rewall-pdp-reels .rewall-pdp-mobile-header {
            display: none !important;
        }
        body.rewall-pdp-reels .cmn-wrap.d-md-none {
            display: none !important;
        }
        body.rewall-pdp-reels .back-btn,
        body.rewall-pdp-reels .sound-btn {
            top: max(12px, env(safe-area-inset-top, 0px));
        }
        body.rewall-pdp-reels .reels {
            max-width: 100vw;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior-x: none;
        }
    }

    .reels{
        position:fixed;
        inset:0;
        height:100dvh;
        width:100%;
        max-width:100%;
        overflow-x:hidden;
        overflow-y:scroll;
        scroll-snap-type:y mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .reel{
        position:relative;
        height:100dvh;
        width:100%;
        scroll-snap-align:start;
        background:#000;
    }

    .reel video{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .reel-poster-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 2;
        pointer-events: none;
        background: #000;
        transition: opacity 0.35s ease;
    }
    .reel-poster-overlay.is-hiding {
        opacity: 0;
    }

    /*
     * گالری فقط‌عکس: همان الگوی فید (کاروسل افقی + اسنپ)؛ قاب ۴:۵؛ تصویر با contain کامل دیده شود؛
     * نوار نقطه‌ها زیر قاب (نه روی عکس)؛ بلوک وسط صفحهٔ ریل.
     */
    .reel.reel--images {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100dvh;
        width: 100%;
        background: #000;
        box-sizing: border-box;
    }
    .reel.reel--images .reel-image-stack {
        width: 100%;
        max-width: min(480px, 100vw);
        padding: 0 14px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    .reel.reel--images .reel-image-frame {
        width: 100%;
        aspect-ratio: 4 / 5;
        max-height: min(calc(100dvh - 230px), 82dvh);
        background: #111827;
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    }
    .reel.reel--images .reel-image-carousel {
        display: flex;
        width: 100%;
        height: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        direction: ltr;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        /* pan-x فقط بود: ژست عمودی به .reels نمی‌رسید و ریل بعدی باز نمی‌شد؛ pan-y هم اجازهٔ اسکرول عمودی والد */
        touch-action: pan-x pan-y;
    }
    .reel.reel--images .reel-image-carousel::-webkit-scrollbar {
        display: none;
    }
    /*
     * peek راهنما با scrollLeft در JS اعمال می‌شود (نه transform روی همین نود):
     * transform روی overflow:auto اغلب فقط لایهٔ اسکرول فعلی را کامپوزیت می‌کند و لبهٔ اسلاید بعدی سیاه دیده می‌شود.
     */
    @media (prefers-reduced-motion: reduce) {
        .reel.reel--images .reel-image-stack:has(.reel-image-carousel--page-hint) .reel-page-swipe-hint {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }
    @keyframes reel-swipe-hint-in {
        from {
            opacity: 0;
            transform: translateY(5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* متن راهنما همزمان با شروع peek (همان تأخیر ۳s) */
    .reel.reel--images .reel-image-stack:has(.reel-image-carousel--page-hint) .reel-page-swipe-hint {
        opacity: 0;
        animation: reel-swipe-hint-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) 3s both forwards;
    }
    .reel.reel--images .reel-page-swipe-hint {
        margin: -2px 0 0;
        padding: 0 8px;
        font-size: 12px;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.78);
        text-align: center;
        line-height: 1.35;
        letter-spacing: 0.03em;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }
    .reel.reel--images .reel-image-slide {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        height: 100%;
        scroll-snap-align: start;
        position: relative;
        overflow: hidden;
        background: #111827;
    }
    .reel.reel--images .reel-image-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
    }
    /* شمارنده زیر قاب — همان اندازهٔ feed-media-dot */
    .reel.reel--images .reel-img-dots {
        position: static;
        transform: none;
        left: auto;
        /* صفحه RTL است؛ بدون این، نقطهٔ اسلاید ۰ سمت راست می‌افتد و با کاروسل LTR برعکس می‌شود */
        direction: ltr;
        unicode-bidi: isolate;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin: 0 auto;
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.36);
        z-index: 2;
        pointer-events: none;
    }
    .reel.reel--images .reel-img-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.55);
    }
    .reel.reel--images .reel-img-dot.active {
        width: 16px;
        border-radius: 999px;
        background: #fff;
    }

    /* فقط اسلاید چندتصویری: کارت کمی پایین‌تر از بالا + پس‌زمینهٔ قاب مثل حاشیهٔ مشکی ریل */
    .reel.reel--images.reel--images-slideshow {
        justify-content: flex-start;
        padding-top: clamp(16px, 6dvh, 52px);
        box-sizing: border-box;
    }
    .reel.reel--images.reel--images-slideshow .reel-image-frame,
    .reel.reel--images.reel--images-slideshow .reel-image-slide {
        background: #000;
    }

    .reel-overlay{
        position:absolute;
        inset:0;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        padding:16px;
        background:linear-gradient(to top,rgba(0,0,0,.6),transparent 45%);
        pointer-events:none;
    }

    .purchase-card{
        position:fixed;
        bottom:12px;
        left:12px;
        right:12px;
        background:var(--glass-bg);
        backdrop-filter:blur(var(--glass-blur)) saturate(160%);
        -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
        border:1px solid var(--glass-border);
        border-radius:20px;
        box-shadow:0 12px 50px var(--glass-shadow), inset 0 0 0.5px rgba(255,255,255,.2);
        color:var(--text);
        padding:10px 12px;
        z-index:10;
        transition:all .25s ease;
        /* تا اسکرول/چرخ‌ماوس روی کارت هم به لایهٔ ریل‌ها برسد و آیتم بعدی باز شود */
        pointer-events: none;
    }
    .purchase-card button,
    .purchase-card a[href],
    .purchase-card [role="link"]{
        pointer-events: auto;
    }

    .purchase-card:hover{
        backdrop-filter:blur(calc(var(--glass-blur) + 6px)) saturate(190%);
        transform:translateY(-3px);
        box-shadow:0 15px 60px rgba(0,0,0,.55);
    }

    .store-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:4px;
        gap:8px;
    }
    .store-name-block{
        display:flex;
        align-items:center;
        gap:8px;
        min-width:0;
        flex:1;
        cursor:pointer;
    }
    .store-logo-wrap{
        width:32px;
        height:32px;
        border-radius:50%;
        overflow:hidden;
        flex-shrink:0;
        background:rgba(255,255,255,0.18);
        border:1px solid rgba(255,255,255,0.35);
        display:none;
        align-items:center;
        justify-content:center;
    }
    .store-logo-wrap.visible{
        display:flex;
    }
    .store-logo{
        width:100%;
        height:100%;
        object-fit:contain;
        display:block;
    }
    .store-footer{
        display:flex;
        gap:8px;
        justify-content:space-between;
        align-items:center;
    }

    .store-name{
        font-size:11px;
        font-weight:700;
        color:var(--text);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        min-width:0;
        flex:1;
    }

    .purchase-card .follow-btn,
    .purchase-card .unfollow-btn{
        border:none !important;
        padding:3px 6px !important;
        border-radius:8px !important;
        font-size:9px !important;
        line-height:1.1 !important;
        font-weight:700 !important;
        cursor:pointer !important;
        color:#fff !important;
        background:rgba(0,151,228,0.97) !important;
        backdrop-filter:blur(12px) !important;
        border:1px solid rgba(255,255,255,0.25) !important;
        transition:.2s !important;
        min-width:unset !important;
        width:auto !important;
        height:26px !important;
        flex-shrink:0 !important;
    }
    .reel-floating-actions{
        position:fixed;
        z-index:12;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:8px;
        pointer-events: none;
    }
    .reel-floating-actions button{
        pointer-events: auto;
    }
    .like-floating-btn{
        width:34px;
        height:34px;
        border:none;
        border-radius:10px;
        background:rgba(255,255,255,0.22);
        color:#fff;
        font-size:17px;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,0.35);
        box-shadow:0 8px 18px rgba(0,0,0,.25);
        flex-shrink:0;
        line-height:0;
        padding:0;
    }
    .like-floating-btn.liked{
        background:rgba(220,38,38,0.55);
        border-color:rgba(255,255,255,0.45);
        color:#fff;
    }
    .like-floating-btn.liked i{
        color:#fff;
    }
    .bookmark-floating-btn{
        width:34px;
        height:34px;
        border:none;
        border-radius:10px;
        background:rgba(255,255,255,0.22);
        color:#fff;
        font-size:16px;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,0.35);
        box-shadow:0 8px 18px rgba(0,0,0,.25);
        flex-shrink:0;
        line-height:0;
        padding:0;
    }
    .bookmark-floating-btn.bookmarked{
        background:rgba(29,78,216,0.58);
        border-color:rgba(255,255,255,0.45);
        color:#fff;
    }
    .bookmark-floating-btn.bookmarked i{
        color:#fff;
    }
    .share-floating-btn{
        position:relative;
        top:auto;
        right:auto;
        width:34px;
        height:34px;
        border:none;
        border-radius:10px;
        background:rgba(255,255,255,0.22);
        color:#fff;
        font-size:16px;
        z-index:12;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,0.35);
        box-shadow:0 8px 18px rgba(0,0,0,.25);
        overflow:hidden;
        gap:6px;
        padding:0 8px 0 10px;
        transform-origin:right top;
        transition:width .22s ease, background .2s ease;
    }
    .share-floating-btn svg{
        width:18px;
        height:18px;
        stroke:#fff;
        fill:none;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
        flex-shrink:0;
        display:block;
        margin:0 auto;
    }
    .share-floating-btn .share-text{
        max-width:0;
        opacity:0;
        white-space:nowrap;
        overflow:hidden;
        font-size:12px;
        font-weight:700;
        transition:max-width .22s ease, opacity .18s ease;
    }
    .share-floating-btn:hover,
    .share-floating-btn.expanded,
    .share-floating-btn:focus-visible{
        width:124px;
        background:rgba(0,0,0,0.5);
    }
    .share-floating-btn:hover .share-text,
    .share-floating-btn.expanded .share-text,
    .share-floating-btn:focus-visible .share-text{
        max-width:80px;
        opacity:1;
    }
    .unfollow-btn{
        color: #373737;
        background: rgb(38, 170, 60);
    }
    .btn-info-product{
        border:none;
        min-width:72px;
        height:40px;
        padding:0 12px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:10px;
        font-size:12px;
        font-weight:700;
        cursor:pointer;
        color: #fff;
        background: rgb(38, 170, 60);
        backdrop-filter:blur(12px);
        border:1px solid rgba(255,255,255,0.25);
        transition:.2s;
        flex-shrink:0;
    }

    .follow-btn:hover, .unfollow-btn:hover{
        background:rgba(255,255,255,0.28);
    }

    .hidden{
        display:none;
    }

    .product-title{
        font-size:16px;
        font-weight:900;
        margin:0 0 6px;
        color:#fff;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        direction:rtl;
        text-align:right;
    }

    .product-price{
        font-size:18px;
        text-align:right;
        text-shadow:0 6px 14px rgb(0 0 0);
        color:#ff0245;
        font-weight:900;
        margin-bottom:8px;
    }

    .buy-btn{
        background:linear-gradient(135deg, #ff2d55, #ff5f84);
        border:none;
        padding:12px 14px;
        border-radius:14px;
        font-size:15px;
        font-weight:800;
        cursor:pointer;
        color:#fff;
        box-shadow:0 4px 20px rgba(255,45,85,.45);
        transition:.2s;
        flex:1;
        min-width:0;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;
    }

    .buy-btn .buy-icon{
        width:16px;
        height:16px;
        display:block;
        stroke:#fff;
        fill:none;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .buy-btn:hover{
        transform:translateY(-3px);
        box-shadow:0 6px 26px rgba(255,45,85,.6);
    }

    .buy-btn:disabled{
        opacity:0.68;
        cursor:wait;
        pointer-events:none;
        transform:none;
        box-shadow:0 4px 20px rgba(255,45,85,.25);
    }

    .back-btn, .sound-btn{
        position:fixed;
        top:16px;
        background:rgba(255,255,255,0.12);
        border:none;
        width:44px;
        height:44px;
        border-radius:50%;
        font-size:20px;
        cursor:pointer;
        z-index:20;
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
        border:1px solid rgba(255,255,255,0.25);
        color:#fff;
        transition:.2s;
    }

    .back-btn:hover, .sound-btn:hover{
        background:rgba(255,255,255,0.22);
        transform:scale(1.05);
    }

    .back-btn{ left:16px; }
    .sound-btn{ right:16px; }

    .reels, .reel, .purchase-card, .reel-overlay {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .reel video {
        user-select: none;
        -webkit-user-select: none;
    }
    * {
        -webkit-touch-callout: none;
    }

    .stroked{
        text-decoration: line-through;
        color: #e5e7eb;
        font-size: 14px !important;
    }
    .discount-badge{
        position:absolute;
        top:12px;
        right:12px;
        background:#ff2d55;
        color:#fff;
        padding:6px 10px;
        font-size:13px;
        font-weight:900;
        border-radius:12px;
        box-shadow:0 4px 12px rgba(0,0,0,.35);
        z-index:20;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
    }

    .play-overlay{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        background:rgba(0,0,0,0.5);
        width:80px;
        height:80px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-size:36px;
        cursor:pointer;
        z-index:15;
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
        transition:opacity .3s ease;
    }
    .play-overlay.hidden{
        opacity:0;
        pointer-events:none;
    }

    /* نمایش هنگام نگه داشتن سمت راست برای ۲× سرعت */
    .reel-speed-hint {
        position: absolute;
        inset-inline-end: 12px;
        top: 40%;
        transform: translateY(-50%);
        z-index: 18;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.58);
        border: 1px solid rgba(255, 255, 255, 0.38);
        color: #fff;
        font-weight: 900;
        font-size: 14px;
        letter-spacing: 0.04em;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.12s ease, transform 0.12s ease;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    }
    .reel-speed-hint.active {
        opacity: 1;
        transform: translateY(-50%) scale(1.03);
    }
    .reel-speed-hint__ff {
        font-size: 17px;
        line-height: 1;
        opacity: 0.95;
    }
    .reel-sound-hint-top{
        position:fixed;
        z-index:13;
        display:none;
        align-items:center;
        gap:6px;
        background:rgba(0,0,0,0.58);
        color:#fff;
        border:1px solid rgba(255,255,255,0.38);
        border-radius:999px;
        padding:6px 10px;
        font-size:11px;
        font-weight:800;
        line-height:1;
        pointer-events:none;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
    }
    .reel-sound-hint-top.visible{
        display:inline-flex;
    }

    /** راهنمای آموزشی روزانه (بعد از ~۵۰٪ تماشا) — سبک مشابه راهنمای صدا */
    .reel-edu-hint{
        position:fixed;
        z-index:14;
        left:50%;
        transform:translateX(-50%);
        max-width:min(92vw, 360px);
        display:none;
        padding:10px 14px;
        background:rgba(0,0,0,0.62);
        color:#fff;
        border:1px solid rgba(255,255,255,0.38);
        border-radius:14px;
        font-size:11px;
        font-weight:800;
        line-height:1.55;
        text-align:center;
        pointer-events:none;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        box-shadow:0 10px 32px rgba(0,0,0,0.35);
        opacity:0;
        transition:opacity .35s ease;
    }
    .reel-edu-hint.visible{
        display:block;
        opacity:1;
    }

    .rewall-like-burst-fixed {
        position: fixed;
        left: 0;
        top: 0;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 28000;
        width: min(44vw, 180px);
        height: min(44vw, 180px);
        color: #ff2d55;
        filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.5));
    }
    .rewall-like-burst-fixed__inner {
        width: 100%;
        height: 100%;
        animation: rewall-like-burst-pop 0.95s cubic-bezier(0.2, 0.9, 0.35, 1.15) forwards;
    }
    .rewall-like-burst-fixed svg {
        display: block;
        width: 100%;
        height: 100%;
        fill: currentColor;
    }
    @keyframes rewall-like-burst-pop {
        0% { transform: scale(0); opacity: 0; }
        14% { transform: scale(1.18); opacity: 1; }
        26% { transform: scale(0.92); opacity: 1; }
        38% { transform: scale(1); opacity: 1; }
        72% { transform: scale(1); opacity: 1; }
        100% { transform: scale(1.12); opacity: 0; }
    }

    .cart-shimmer-overlay {
        position: fixed;
        inset: 0;
        z-index: 30000;
        background: rgba(15, 23, 42, 0.2);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        display: none;
        align-items: center;
        justify-content: center;
    }

    .cart-shimmer-overlay.active {
        display: flex;
    }

    .cart-shimmer-box {
        width: min(340px, calc(100% - 36px));
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 20px 50px rgba(0,0,0,.18);
    }

    .cart-shimmer-line {
        height: 12px;
        border-radius: 8px;
        margin-bottom: 10px;
        background: linear-gradient(110deg, #eceff3 8%, #f8fafc 18%, #eceff3 33%);
        background-size: 220% 100%;
        animation: cart-shimmer-move 1.1s linear infinite;
    }

    .cart-shimmer-line:last-child {
        margin-bottom: 0;
    }

    .cart-shimmer-line.w-80 { width: 80%; }
    .cart-shimmer-line.w-60 { width: 60%; }
    .cart-shimmer-line.w-95 { width: 95%; }

    @keyframes cart-shimmer-move {
        to { background-position-x: -220%; }
    }