/* YahuY Product Page Styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{--bg:#121212;--bg2:#1A1A1A;--bg3:#222;--bg4:#2A2A2A;--white:#F0F0F0;--gray:#AAA;--gl:#CCC;--gd:#777;--border:rgba(255,255,255,0.08);--accent:#E8913A;--orange:#E8913A;--red:#D32F2F;--green:#2E7D32;--blue:#1976D2;--purple:#9C27B0;--font-d:'DM Serif Display',Georgia,serif;--font-b:'Inter',-apple-system,sans-serif;--font-ar:'Noto Kufi Arabic',sans-serif;--px:clamp(16px,4vw,60px);--nav-h:56px;--shadow:0 2px 20px rgba(0,0,0,0.3)}

[data-theme="light"]{--bg:#F5F5F5;--bg2:#FFFFFF;--bg3:#ECECEC;--bg4:#E0E0E0;--white:#1A1A1A;--gray:#555;--gl:#333;--gd:#888;--border:rgba(0,0,0,0.08);--accent:#B8720A;--orange:#D4760A;--shadow:0 2px 20px rgba(0,0,0,0.06)}

html{scroll-behavior:smooth}

body{font-family:var(--font-b);background:var(--bg);color:var(--white);line-height:1.6;min-height:100vh}

body.ar{direction:rtl;font-family:var(--font-ar)}

a{color:inherit;text-decoration:none}

button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}

img{display:block;max-width:100%}

@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

@keyframes slideIn{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}

.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--px);background:rgba(18,18,18,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}

[data-theme="light"] .nav{background:rgba(245,245,245,0.92)}

.nav-logo{display:flex;align-items:center;gap:8px}

.nav-logo img{height:48px;width:auto;mix-blend-mode:screen}

[data-theme="light"] .nav-logo img{mix-blend-mode:multiply;filter:contrast(1.2) brightness(0.9)}

.nav-back{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--gd);transition:color .2s}

.nav-back:hover{color:var(--accent)}

.nav-back svg{width:15px;height:15px}

.nav-right{display:flex;align-items:center;gap:8px}

.theme-toggle{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .3s}

.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

.theme-toggle svg{width:13px;height:13px}

.lang-switch{display:flex;border:1px solid var(--border);overflow:hidden}

.lang-btn{padding:4px 8px;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--gd);transition:all .3s}

.lang-btn.active{background:var(--white);color:var(--bg)}

.cart-btn{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);transition:all .3s}

.cart-btn:hover{border-color:var(--accent);color:var(--accent)}

.cart-count{position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:all .3s}

.cart-count.show{opacity:1;transform:scale(1)}

.icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.sp-bar{background:var(--accent);padding:6px var(--px);display:flex;align-items:center;justify-content:center;gap:16px;font-size:.7rem;color:#fff;font-weight:500;flex-wrap:wrap}

.sp-bar svg{width:12px;height:12px}

.sp-dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:pulse 1.5s infinite}

.pp{padding:24px var(--px) 32px}

.pp-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;max-width:1060px;margin:0 auto;animation:fadeIn .5s}

@media(max-width:768px){.sticky-cta{display:block}}

.pp-gallery{position:relative}

.pp-main{aspect-ratio:3/4;overflow:hidden;background:var(--bg3);border:1px solid var(--border);cursor:zoom-in;position:relative}

.pp-main img{width:100%;height:100%;object-fit:cover;transition:transform .5s}

.pp-main:hover img{transform:scale(1.06)}

.pp-badge{position:absolute;top:12px;left:12px;padding:4px 10px;background:var(--red);color:#fff;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:2px;z-index:2}

.pp-wish{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2;transition:all .3s;border:1px solid rgba(255,255,255,.1)}

.pp-wish:hover,.pp-wish.on{background:var(--red);border-color:var(--red)}

.pp-wish svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2}

.pp-wish.on svg{fill:#fff}

.pp-thumbs{display:flex;gap:6px;margin-top:8px}

.pp-thumb{width:52px;height:52px;border:2px solid transparent;overflow:hidden;cursor:pointer;opacity:.55;transition:all .2s;flex-shrink:0}

.pp-thumb.active,.pp-thumb:hover{border-color:var(--accent);opacity:1}

.pp-thumb img{width:100%;height:100%;object-fit:cover}

.pp-info{display:flex;flex-direction:column}

.pp-cat{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);margin-bottom:4px}

.pp-title{font-family:var(--font-d);font-size:clamp(1.4rem,2.5vw,1.9rem);line-height:1.15;margin-bottom:6px}

.pp-rating{display:flex;align-items:center;gap:6px;margin-bottom:10px}

.pp-stars{display:flex;gap:1px}

.pp-stars svg{width:13px;height:13px;fill:var(--accent);stroke:none}

.pp-stars svg.empty{fill:var(--bg3);stroke:var(--gd);stroke-width:1}

.pp-rtext{font-size:.72rem;color:var(--gd)}

.pp-prices{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}

.pp-price{font-size:1.5rem;font-weight:700;color:var(--accent)}

.pp-old{font-size:.9rem;color:var(--gd);text-decoration:line-through}

.pp-save{padding:2px 6px;background:rgba(211,47,47,.12);color:var(--red);font-size:.6rem;font-weight:700;border-radius:2px}

.pp-desc{font-size:.95rem;color:var(--gray);line-height:1.8;margin-bottom:16px}

.pp-features{margin-bottom:12px;display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}

.pp-feat{display:flex;align-items:center;gap:6px;font-size:.76rem;padding:3px 0;color:var(--gray)}

.pp-feat svg{width:13px;height:13px;color:var(--green);flex-shrink:0}

.pp-stock{display:flex;align-items:center;gap:6px;font-size:.75rem;margin-bottom:10px}

.pp-stock.low{color:var(--red)}

.pp-stock.med{color:var(--orange)}

.pp-stock.ok{color:var(--green)}

.pp-stock .dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulse 1.5s infinite}

.pp-stock-bar{width:80px;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;margin-left:4px}

.pp-stock-fill{height:100%;border-radius:2px;transition:width .5s}

.pp-viewers{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--gray);margin-bottom:12px;padding:6px 10px;background:var(--bg3);border-radius:4px;width:fit-content}

.pp-viewers .dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite}

.pp-qty{display:flex;align-items:center;gap:0;margin-bottom:14px;border:1px solid var(--border);width:fit-content}

.pp-qty button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--gd);transition:all .2s}

.pp-qty button:hover{color:var(--white);background:var(--bg3)}

.pp-qty span{width:36px;text-align:center;font-weight:600;font-size:.85rem;border-left:1px solid var(--border);border-right:1px solid var(--border)}

.pp-ctas{display:flex;gap:8px;margin-bottom:16px}

.btn-p{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;background:var(--white);color:var(--bg);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;transition:all .3s;flex:1;justify-content:center;border-radius:3px}

.btn-p:hover{background:var(--accent);color:#fff;box-shadow:0 4px 16px rgba(232,145,58,.25)}

.btn-o{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;border:1px solid var(--border);color:var(--white);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;transition:all .3s;justify-content:center;border-radius:3px;flex:1}

.btn-o:hover{border-color:var(--accent);color:var(--accent)}

.pp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:14px;border-top:1px solid var(--border)}

.pp-trust-item{text-align:center;padding:6px 0}

.pp-trust-item svg{width:18px;height:18px;color:var(--accent);margin-bottom:2px}

.pp-trust-item div{font-size:.62rem;color:var(--gd)}

.bundle{max-width:1060px;margin:32px auto;padding:0 var(--px)}

.bundle-box{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:20px}

.bundle-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}

.bundle-head h3{font-family:var(--font-d);font-size:1.1rem}

.bundle-save{padding:3px 8px;background:rgba(211,47,47,.12);color:var(--red);font-size:.6rem;font-weight:700;border-radius:2px}

.bundle-items{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}

.bundle-item{flex:0 0 130px;text-align:center;cursor:pointer;transition:transform .2s}

.bundle-item:hover{transform:translateY(-2px)}

.bundle-item img{width:100%;aspect-ratio:3/4;object-fit:cover;border:2px solid var(--border);border-radius:4px;margin-bottom:6px;transition:border-color .2s}

.bundle-item.selected img{border-color:var(--accent)}

.bundle-item .bi-title{font-size:.68rem;font-weight:500;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.bundle-item .bi-price{font-size:.72rem;font-weight:700;color:var(--accent)}

.bundle-item .bi-check{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;margin:4px auto 0;transition:all .2s;font-size:.6rem}

.bundle-item.selected .bi-check{background:var(--accent);border-color:var(--accent);color:#fff}

.bundle-total{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}

.bundle-total .bt-label{font-size:.82rem;color:var(--gd)}

.bundle-total .bt-price{font-size:1.1rem;font-weight:700;color:var(--accent)}

.bundle-add{padding:8px 16px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-radius:3px;transition:all .2s}

.bundle-add:hover{opacity:.85;transform:translateY(-1px)}

.reviews{max-width:1060px;margin:32px auto;padding:0 var(--px)}

.reviews-box{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:20px}

.reviews-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}

.reviews-head h3{font-family:var(--font-d);font-size:1.1rem}

.rv-summary{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}

@media(max-width:500px){.rv-summary{flex-direction:column;align-items:flex-start}}

.rv-big{font-size:2.4rem;font-weight:700;color:var(--accent);line-height:1}

.rv-big-sub{font-size:.72rem;color:var(--gd);margin-top:2px}

.rv-bars{flex:1;min-width:160px}

.rv-bar-row{display:flex;align-items:center;gap:6px;margin-bottom:3px}

.rv-bar-row span:first-child{font-size:.65rem;color:var(--gd);width:12px;text-align:right}

.rv-bar-track{flex:1;height:5px;background:var(--bg3);border-radius:3px;overflow:hidden}

.rv-bar-fill{height:100%;background:var(--accent);border-radius:3px}

.rv-bar-row span:last-child{font-size:.65rem;color:var(--gd);width:20px}

.rv-list{display:flex;flex-direction:column;gap:14px}

.rv-item{padding:12px 0;border-bottom:1px solid var(--border);animation:slideIn .4s}

.rv-item:last-child{border:none}

.rv-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}

.rv-avatar{width:28px;height:28px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--accent)}

.rv-meta{flex:1}

.rv-name{font-size:.78rem;font-weight:600}

.rv-date{font-size:.62rem;color:var(--gd)}

.rv-stars{display:flex;gap:1px;margin-bottom:4px}

.rv-stars svg{width:11px;height:11px;fill:var(--accent);stroke:none}

.rv-stars svg.empty{fill:var(--bg3);stroke:var(--gd);stroke-width:1}

.rv-text{font-size:.78rem;color:var(--gray);line-height:1.6}

.rv-verified{display:inline-flex;align-items:center;gap:3px;font-size:.6rem;color:var(--green);margin-top:4px}

.rv-verified svg{width:10px;height:10px}

.rv-form{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}

.rv-form h4{font-size:.82rem;font-weight:600;margin-bottom:10px}

.rv-form-stars{display:flex;gap:4px;margin-bottom:10px}

.rv-form-stars svg{width:20px;height:20px;fill:var(--bg3);stroke:var(--gd);stroke-width:1;cursor:pointer;transition:all .15s}

.rv-form-stars svg.on{fill:var(--accent);stroke:none}

.rv-form-stars svg:hover{fill:var(--accent);stroke:none;transform:scale(1.15)}

.rv-input{width:100%;padding:8px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:3px;color:var(--white);font-family:var(--font-b);font-size:.78rem;margin-bottom:8px;resize:vertical;min-height:50px}

.rv-input:focus{outline:none;border-color:var(--accent)}

.rv-name-input{min-height:auto;max-height:36px}

.rv-submit{padding:7px 16px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-radius:3px;transition:all .2s}

.rv-submit:hover{opacity:.85}

.rv-section{max-width:1060px;margin:32px auto;padding:0 var(--px)}

.rv-section h3{font-family:var(--font-d);font-size:1.1rem;margin-bottom:12px}

.rv-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}

.rv-card{flex:0 0 120px;background:var(--bg2);border:1px solid var(--border);overflow:hidden;transition:transform .2s,border-color .2s;cursor:pointer}

.rv-card:hover{transform:translateY(-2px);border-color:rgba(232,145,58,.3)}

.rv-card img{width:100%;aspect-ratio:3/4;object-fit:cover}

.rv-card .rc-info{padding:8px}

.rv-card .rc-title{font-size:.65rem;font-weight:500;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.rv-card .rc-price{font-size:.68rem;font-weight:700;color:var(--accent)}

.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--green);color:#fff;padding:10px 20px;font-size:.8rem;font-weight:500;border-radius:4px;z-index:200;opacity:0;transition:all .3s;pointer-events:none}

.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;padding:10px var(--px);background:rgba(18,18,18,.95);backdrop-filter:blur(12px);border-top:1px solid var(--border)}

[data-theme="light"] .sticky-cta{background:rgba(245,245,245,.95)}

.sticky-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:1060px;margin:0 auto}

.sticky-cta .st-price{font-weight:700;color:var(--accent);font-size:.95rem}

.sticky-cta .st-btns{display:flex;gap:6px;flex:1}

.sticky-cta .btn-p,.sticky-cta .btn-o{padding:9px 14px;font-size:.68rem}

/* ===== MOBILE PRODUCT PAGE ===== */
@media(max-width:768px){
.pp-grid{grid-template-columns:1fr!important;gap:16px!important}
.pp-gallery img{width:100%!important;height:auto!important;max-height:50vh!important;object-fit:cover!important;border-radius:8px}
.pp-info{padding:0!important}
.pp-info h1{font-size:1.2rem!important;line-height:1.3!important;margin-bottom:8px!important}
.pp-info .pp-price{font-size:1.4rem!important}
.pp-info .pp-old{font-size:.85rem!important}
.pp-info .pp-desc{font-size:.82rem!important;-webkit-line-clamp:3!important}
.pp-info .pp-features{font-size:.78rem!important}
.pp-info .btn-p,.pp-info .btn-o{padding:11px 20px!important;font-size:.82rem!important;width:100%!important;justify-content:center!important}
.pp-info .btn-row{flex-direction:column!important;gap:8px!important}
.pp-info .pp-qty{justify-content:flex-start!important}
.pp-info .pp-shipping{font-size:.75rem!important}
.pp-info .pp-trust{font-size:.72rem!important}
.pp-info .pp-share{margin-top:12px!important}
.reviews{padding:0 16px!important}
.reviews-box{padding:14px!important}
.rv-form-stars svg{width:16px!important;height:16px!important}
.bundle-item{flex:0 0 100px!important}
.rv-card{flex:0 0 100px!important}
.sticky-cta .btn-p,.sticky-cta .btn-o{padding:10px 16px!important;font-size:.72rem!important}
}

@media(max-width:400px){
.pp-info h1{font-size:1.05rem!important}
.pp-info .pp-price{font-size:1.2rem!important}
.pp-info .btn-p,.pp-info .btn-o{padding:10px 16px!important;font-size:.78rem!important}
}

.pp-share{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--bg2);color:var(--gray);cursor:pointer;transition:all .2s;text-decoration:none}
.share-btn:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.1)}
.share-fb:hover{border-color:#1877F2;color:#1877F2}
.share-wa:hover{border-color:#25D366;color:#25D366}
.share-tw:hover{border-color:#1DA1F2;color:#1DA1F2}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}