.rey-ui .mag-card .date { font: 400 12px var(--rey-font); color: var(--muted); margin-top: 12px; } .rey-ui .trust { display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border-2); } .rey-ui .trust > div { display: flex; align-items: center; gap: 12px; } .rey-ui .trust .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--gray-1); flex: 0 0 44px; display: flex; align-items: center; justify-content: center; } .rey-ui .trust .ico svg { width: 22px; height: 22px; stroke: var(--green); } .rey-ui .trust span { font: 500 13px var(--rey-font); color: var(--text-2); } .rey-ui .pd-grid { display: grid; grid-template-columns: 360px 1fr 300px; gap: 20px; align-items: start; margin-top: 24px; } .rey-ui .gallery { background: var(--surface); border: 1px solid var(--border); border-radius: calc(20px * var(--rey-r)); padding: 14px; position: sticky; top: 16px; } .rey-ui .g-main { aspect-ratio: 1/1; border-radius: calc(14px * var(--rey-r)); overflow: hidden; background: var(--gray-1); } .rey-ui .g-main img { width: 100%; height: 100%; object-fit: cover; } .rey-ui .g-thumbs { display: flex; gap: 8px; margin-top: 10px; } .rey-ui .g-thumb { width: 58px; height: 58px; border-radius: calc(10px * var(--rey-r)); overflow: hidden; border: 1.5px solid var(--border); cursor: pointer; padding: 0; background: none; opacity: .75; transition: all .2s; } .rey-ui .g-thumb img { width: 100%; height: 100%; object-fit: cover; } .rey-ui .g-thumb.active, .rey-ui .g-thumb:hover { border-color: var(--green); opacity: 1; } .rey-ui .pd-info h1 { font: 800 20px/1.9 var(--rey-font); color: var(--navy); margin: 0; } .rey-ui .pd-en { font: 400 11px ui-monospace, Menlo, monospace; color: var(--muted); direction: ltr; text-align: right; display: block; margin-top: 6px; } .rey-ui .pd-meta { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border-2); flex-wrap: wrap; } .rey-ui .pd-meta .rate { display: flex; align-items: center; gap: 5px; font: 600 12.5px var(--rey-font); color: var(--text-2); } .rey-ui .pd-meta .rate svg { width: 14px; height: 14px; color: #f5a623; } .rey-ui .pd-meta .lnk { font: 500 12px var(--rey-font); color: var(--green); } .rey-ui .pd-sec-title { font: 700 14px var(--rey-font); color: var(--navy); margin: 18px 0 10px; } .rey-ui .key-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rey-ui .ks { background: var(--gray-1); border-radius: calc(12px * var(--rey-r)); padding: 10px 14px; } .rey-ui .ks span { display: block; font: 400 11px var(--rey-font); color: var(--muted); } .rey-ui .ks b { display: block; font: 600 12.5px var(--rey-font); color: var(--text); margin-top: 3px; } .rey-ui .swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--border); transition: box-shadow .2s; } .rey-ui .swatch.active { box-shadow: 0 0 0 2px var(--green); } .rey-ui .pd-note { margin-top: 18px; border: 1px solid var(--border); border-radius: calc(14px * var(--rey-r)); padding: 14px 16px; display: flex; gap: 10px; font: 400 12px/2 var(--rey-font); color: var(--text-3); } .rey-ui .pd-note svg { width: 18px; height: 18px; color: var(--green); flex: 0 0 18px; margin-top: 4px; } .rey-ui .buy-box { background: var(--surface); border: 1px solid var(--border); border-radius: calc(20px * var(--rey-r)); padding: 18px; position: sticky; top: 16px; } .rey-ui .bb-price .off-badge { background: var(--red); color: #fff; font: 700 11px var(--rey-font); border-radius: 99px; padding: 2px 9px; } .rey-ui .buy-box .btn-primary { width: 100%; } .rey-ui .bb-sellers { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font: 500 12px var(--rey-font); color: var(--text-2); } .rey-ui .bb-sellers a { color: var(--green); font-weight: 700; } .rey-ui .sellers-list { display: flex; flex-direction: column; gap: 10px; } .rey-ui .seller-row { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: calc(16px * var(--rey-r)); padding: 16px 18px; } .rey-ui .seller-row .s-name { display: flex; align-items: center; gap: 10px; font: 700 13px var(--rey-font); color: var(--navy); } .rey-ui .seller-row .s-name svg { width: 20px; height: 20px; color: var(--green); } .rey-ui .seller-row .s-name .perf { display: block; font: 400 10.5px var(--rey-font); color: var(--muted); font-weight: 400; margin-top: 2px; } .rey-ui .seller-row .s-war { display: flex; align-items: center; gap: 8px; font: 400 12px var(--rey-font); color: var(--text-3); } .rey-ui .seller-row .s-war svg { width: 16px; height: 16px; color: var(--muted); } .rey-ui .seller-row .s-buy { display: flex; align-items: center; gap: 14px; } .rey-ui .seller-row .s-price { font: 800 15px var(--rey-font); color: var(--navy); } .rey-ui .seller-row .s-price small { font: 400 11px var(--rey-font); color: var(--text-3); } .rey-ui .seller-row .s-price .s-off { display: inline-block; background: var(--red); color: #fff; font: 700 10px var(--rey-font); border-radius: 99px; padding: 1px 7px; margin-left: 6px; } .rey-ui .seller-row .btn-primary { padding: 9px 18px; font-size: 12px; } .rey-ui .seller-row.best { border-color: var(--green-300); background: var(--green-050); } .rey-ui .pd-tabs { position: sticky; top: 0; z-index: 20; background: rgba(251,251,252,.94); backdrop-filter: blur(6px); border-bottom: 1.5px solid var(--border); display: flex; gap: 4px; margin-top: 8px; } .rey-ui .pd-tab { font: 700 13px var(--rey-font); color: var(--text-3); padding: 14px 18px; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; } .rey-ui .pd-tab.active, .rey-ui .pd-tab:hover { color: var(--green); border-color: var(--green); } .rey-ui .spec-table { border: 1px solid var(--border); border-radius: calc(16px * var(--rey-r)); overflow: hidden; background: var(--surface); } .rey-ui .spec-row { display: grid; grid-template-columns: 220px 1fr; } .rey-ui .spec-row:not(:last-child) { border-bottom: 1px solid var(--border-2); } .rey-ui .spec-row dt { font: 500 12.5px/1.9 var(--rey-font); color: var(--muted); background: #fafbfb; padding: 13px 18px; margin: 0; } .rey-ui .spec-row dd { font: 500 13px/2.1 var(--rey-font); color: var(--text); padding: 13px 18px; margin: 0; } .rey-ui .spec-wrap.collapsed .spec-table { max-height: 430px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); } .rey-ui .pd-article.collapsed { max-height: 320px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); } .rey-ui .spec-more { display: flex; justify-content: center; margin-top: 14px; } .rey-ui .rev-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; } .rey-ui .rev-score { background: var(--surface); border: 1px solid var(--border); border-radius: calc(20px * var(--rey-r)); padding: 24px; text-align: center; position: sticky; top: 60px; } .rey-ui .rev-score .big { font: 900 46px var(--rey-font); color: var(--navy); } .rey-ui .rev-score .big small { font: 600 15px var(--rey-font); color: var(--muted); } .rey-ui .rev-score .stars { color: #f5a623; display: flex; justify-content: center; gap: 2px; margin: 6px 0 2px; } .rey-ui .rev-score .stars svg { width: 16px; height: 16px; } .rey-ui .rev-score .cnt { font: 400 11.5px var(--rey-font); color: var(--muted); } .rey-ui .rbar { display: grid; grid-template-columns: 30px 1fr 26px; align-items: center; gap: 8px; margin-top: 10px; } .rey-ui .rbar span { font: 500 11px var(--rey-font); color: var(--text-3); } .rey-ui .rbar .tr { height: 6px; border-radius: 99px; background: var(--gray-1); overflow: hidden; } .rey-ui .rbar .tr i { display: block; height: 100%; border-radius: 99px; background: var(--green); } .rey-ui .rev-score .btn-primary { width: 100%; margin-top: 18px; } .rey-ui .rev-list { display: flex; flex-direction: column; gap: 12px; } .rey-ui .rev-sort { display: flex; gap: 8px; margin-bottom: 4px; } .rey-ui .rev-sort button { font: 500 12px var(--rey-font); color: var(--text-3); background: #fff; border: 1px solid var(--border); border-radius: 99px; padding: 7px 16px; } .rey-ui .rev-sort button.active { color: #fff; background: var(--green); border-color: var(--green); } .rey-ui .rev-card { background: var(--surface); border: 1px solid var(--border); border-radius: calc(16px * var(--rey-r)); padding: 18px 20px; } .rey-ui .rev-head { display: flex; align-items: center; gap: 10px; } .rey-ui .rev-head .who { font: 700 13px var(--rey-font); color: var(--navy); } .rey-ui .rev-head .buyer { font: 600 10px var(--rey-font); color: var(--green); background: var(--green-100); border-radius: 99px; padding: 3px 10px; } .rey-ui .rev-head .date { font: 400 11px var(--rey-font); color: var(--muted); margin-right: auto; } .rey-ui .rev-stars { color: #f5a623; display: flex; gap: 1px; margin-top: 8px; } .rey-ui .rev-stars svg { width: 13px; height: 13px; } .rey-ui .rev-card p { font: 400 13px/2.2 var(--rey-font); color: var(--text-2); margin: 10px 0 0; } .rey-ui .rev-foot { display: flex; gap: 8px; margin-top: 12px; } .rey-ui .rev-foot button { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--rey-font); color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 99px; padding: 5px 12px; transition: all .2s; } .rey-ui .rev-foot button:hover { color: var(--green); border-color: var(--green); } .rey-ui .rev-foot button svg { width: 13px; height: 13px; } .rey-ui .qty { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--border); border-radius: calc(12px * var(--rey-r)); padding: 0; overflow: hidden; background: #fff; } .rey-ui .qty button { width: 40px; height: 44px; flex: 0 0 40px; border: none; background: transparent; border-radius: 0; color: var(--green); font: 700 19px/1 var(--rey-font); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; } .rey-ui .qty button:hover { background: var(--green-100); } .rey-ui .qty button:active { background: var(--green-100); } .rey-ui .qty button.del { color: var(--red); } .rey-ui .qty b { min-width: 26px; text-align: center; font: 700 13px var(--rey-font); color: var(--navy); } /* فیلد عددیِ تعداد — عرض قفل‌شده تا دکمه‌ی خرید له نشود (خنثی‌کردن width:100%ِ قالب مادر) */ .rey-ui .bb-buy .qty { flex: 0 0 auto; } .rey-ui .bb-buy .qty .qty-input, .rey-ui .qty input.qty-input { width: 46px; min-width: 46px; max-width: 46px; flex: 0 0 46px; height: 44px; border: 0; border-inline: 1.5px solid var(--border); border-radius: 0; padding: 0; font: 700 14px var(--rey-font); color: var(--navy); background: transparent; text-align: center; outline: none; -moz-appearance: textfield; appearance: textfield; } .rey-ui .qty input.qty-input::-webkit-outer-spin-button, .rey-ui .qty input.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rey-ui .filters { position: sticky; top: 16px; } .rey-ui .filters .f-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .rey-ui .filters .f-head b { font: 800 14px var(--rey-font); color: var(--navy); } .rey-ui .filters .f-clear { font: 600 11px var(--rey-font); color: var(--red); background: none; border: none; } .rey-ui .fopt .cnt2 { margin-right: auto; font: 400 10.5px var(--rey-font); color: var(--muted); } .rey-ui .filters-toggle { display: none; } .rey-ui .bb-feat { display: flex; gap: 11px; align-items: center; padding: 10px 0; } .rey-ui .bb-feat + .bb-feat { border-top: 1px dashed var(--border-2); } .rey-ui .bb-feat .fi { width: 36px; height: 36px; flex: 0 0 36px; border-radius: calc(11px * var(--rey-r)); background: var(--green-100); color: var(--green); display: flex; align-items: center; justify-content: center; } .rey-ui .bb-feat .fi svg { width: 17px; height: 17px; } .rey-ui .bb-feat b { display: block; font: 700 12.5px var(--rey-font); color: var(--navy); } .rey-ui .bb-feat div > span { display: block; font: 400 10.5px var(--rey-font); color: var(--muted); margin-top: 2px; } .rey-ui .bb-price2 { border-top: 1px solid var(--border-2); margin-top: 6px; padding: 14px 0 4px; display: flex; flex-direction: column; gap: 3px; } .rey-ui .bb-price2 .row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rey-ui .bb-price2 .cur { font: 900 23px var(--rey-font); color: var(--navy); } .rey-ui .bb-price2 .cur small { font: 400 12px var(--rey-font); color: var(--text-3); } .rey-ui .bb-price2 .old { font: 400 12.5px var(--rey-font); color: #c0c4ca; text-decoration: line-through; } .rey-ui .bb-buy { display: flex; gap: 10px; margin-top: 10px; } .rey-ui .bb-buy .btn-primary { flex: 1; border-radius: calc(13px * var(--rey-r)); padding: 13px 10px; font-size: 13.5px; } .rey-ui .bb-buy .btn-primary svg { width: 18px; height: 18px; } .rey-ui .key-specs { display: flex; flex-wrap: wrap; gap: 8px; } .rey-ui .key-specs .ks { display: inline-flex; align-items: stretch; padding: 0; background: #fff; border: 1.5px solid #dcece4; border-radius: calc(12px * var(--rey-r)); overflow: hidden; } .rey-ui .key-specs .ks span { display: flex; align-items: center; background: var(--green-100); color: var(--green); font: 700 10.5px var(--rey-font); padding: 8px 12px; margin: 0; } .rey-ui .key-specs .ks b { display: flex; align-items: center; font: 600 12px var(--rey-font); color: var(--navy); padding: 8px 12px; margin: 0; } .rey-ui .cmp-cta { margin-top: 18px; display: flex; align-items: center; gap: 12px; border: 1.5px dashed #9fcbb4; background: var(--green-050); border-radius: calc(14px * var(--rey-r)); padding: 13px 16px; transition: all .25s; } .rey-ui .cmp-cta .ci { width: 38px; height: 38px; flex: 0 0 38px; border-radius: calc(11px * var(--rey-r)); background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; } .rey-ui .cmp-cta .ci svg { width: 18px; height: 18px; } .rey-ui .cmp-cta b { display: block; font: 700 13px var(--rey-font); color: var(--navy); } .rey-ui .cmp-cta small { display: block; font: 400 11px var(--rey-font); color: var(--text-3); margin-top: 2px; } .rey-ui .cmp-cta .arr { margin-right: auto; color: var(--green); font-weight: 800; transition: transform .25s; } .rey-ui .cmp-cta:hover { background: var(--green-100); border-style: solid; } .rey-ui .cmp-cta:hover .arr { transform: translateX(-4px); } .rey-ui .pd-article { background: var(--surface); border: 1px solid var(--border); border-radius: calc(18px * var(--rey-r)); padding: 26px 28px; } .rey-ui .pd-article p { font: 400 13.5px/2.4 var(--rey-font); color: var(--text-2); margin: 0 0 14px; } .rey-ui .pd-article h3.first { margin-top: 0; } .rey-ui .pd-article h3 { font: 800 15px var(--rey-font); color: var(--navy); margin: 22px 0 10px; display: flex; align-items: center; gap: 9px; } .rey-ui .pd-article h3::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--green); transform: rotate(45deg); } @media (max-width: 860px) { .rey-ui .bb-price2 .cur { font-size: 20px; } .rey-ui .key-specs .ks { flex: 1 1 calc(50% - 4px); } .rey-ui .key-specs .ks b { flex: 1; } .rey-ui .pd-article { padding: 16px 18px; } .rey-ui .cmp-cta small { display: none; } } .rey-ui .qty button:disabled { opacity: .35; cursor: default; } .rey-ui .seller-row { grid-template-columns: 1.05fr 240px 1fr auto; } .rey-ui .s-pr .s-off2 { background: var(--red); color: #fff; font: 700 10px var(--rey-font); border-radius: 99px; padding: 2px 9px; } .rey-ui .s-pr .s-old { font: 400 11.5px var(--rey-font); color: #c0c4ca; text-decoration: line-through; } .rey-ui .bb-stock { display: flex; align-items: center; gap: 8px; font: 700 12px var(--rey-font); color: var(--green); padding: 10px 0 2px; } .rey-ui .bb-stock i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: blink 1.6s infinite; } .rey-ui .bb-stock.low { color: var(--red); } .rey-ui .ptab-btns { display: flex; gap: 8px; margin-bottom: 18px; } .rey-ui .ptab { font: 700 13px var(--rey-font); color: var(--text-3); background: #fff; border: 1.5px solid var(--border); border-radius: 99px; padding: 10px 24px; cursor: pointer; transition: all .2s; } .rey-ui .ptab.active { background: var(--green); border-color: var(--green); color: #fff; } .rey-ui .ptab-panel { display: none; } .rey-ui .ptab-panel.active { display: block; } .rey-ui .variants { display: flex; flex-direction: column; gap: 4px; } .rey-ui .variant-group .vg-label { display: block; font: 700 13px var(--rey-font); color: var(--navy); margin: 14px 0 9px; } .rey-ui .variant-group .vg-label b { color: var(--text-3); font-weight: 500; } .rey-ui .vg-opts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rey-ui .vopt { font: 600 12px var(--rey-font); color: var(--text-2); background: #fff; border: 1.5px solid var(--border); border-radius: calc(10px * var(--rey-r)); padding: 8px 16px; cursor: pointer; transition: all .15s; } .rey-ui .vopt.active { border-color: var(--green); color: var(--green); background: var(--green-100); font-weight: 700; } .rey-ui .buy-sticky { position: fixed; bottom: 0; right: 0; left: 0; z-index: 70; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(0,0,0,.07); } .rey-ui .bsk { display: flex; align-items: center; gap: 14px; padding: 10px 20px; } .rey-ui .bsk img { width: 46px; height: 46px; border-radius: calc(10px * var(--rey-r)); object-fit: cover; border: 1px solid var(--border); } .rey-ui .bsk-t { flex: 1; font: 600 13px var(--rey-font); color: var(--navy); } .rey-ui .bsk-war { display: block; font: 400 10.5px var(--rey-font); color: var(--muted); margin-top: 2px; } .rey-ui .bsk-price { display: flex; align-items: center; gap: 10px; } .rey-ui .bsk-price > div { display: flex; flex-direction: column; align-items: flex-start; } .rey-ui .bsk-price b { font: 900 16px var(--rey-font); color: var(--navy); } .rey-ui .bsk-price b + small { font: 400 10px var(--rey-font); color: var(--text-3); } .rey-ui .bsk-price .old { font: 400 11px var(--rey-font); color: #c0c4ca; text-decoration: line-through; } .rey-ui .bsk .btn-primary { padding: 12px 28px; border-radius: calc(12px * var(--rey-r)); } @media (max-width: 860px) { .rey-ui /* (7) چیدمان خرید موبایل */ .bb-price2 .row1 { flex-direction: row-reverse; } .rey-ui .bb-price2 .old { align-self: flex-end; } .rey-ui .bb-buy { align-items: stretch; } .rey-ui .bb-buy .qty { align-items: center; } .rey-ui .buy-sticky { bottom: 56px; } .rey-ui .bsk { padding: 8px 12px; gap: 10px; } .rey-ui .bsk-t { display: none; } .rey-ui .bsk img { width: 40px; height: 40px; } .rey-ui .bsk .btn-primary { flex: 1; padding: 12px 10px; font-size: 12.5px; } .rey-ui .ptab { padding: 9px 16px; font-size: 12px; } .rey-ui .seller-row { grid-template-columns: 1fr; gap: 10px; padding: 14px; } .rey-ui .s-pr2 { flex-wrap: wrap; border-top: 1px dashed var(--border-2); padding-top: 12px; width: 100%; } .rey-ui .s-pr2 b { font-size: 15px; } .rey-ui .s-name2 span, .rey-ui .s-ship span { margin-top: 4px; } .rey-ui .seller-row .btn-primary { width: 100%; } } .rey-ui .seller-row { grid-template-columns: 1.15fr 1fr 1.1fr auto auto; align-items: center; gap: 18px; padding: 18px 22px; } .rey-ui .s-name2 b { display: block; font: 800 14px var(--rey-font); color: var(--navy); } .rey-ui .s-name2 span { display: block; font: 400 11.5px var(--rey-font); color: var(--muted); margin-top: 7px; } .rey-ui .s-name2 i { font-style: normal; font-weight: 700; color: var(--text-2); } .rey-ui .s-ship b { display: block; font: 600 13px var(--rey-font); color: var(--navy); } .rey-ui .s-ship span { display: block; font: 400 11.5px var(--rey-font); color: var(--green); margin-top: 7px; } .rey-ui .s-pr2 { display: flex; align-items: center; gap: 9px; } .rey-ui .s-pr2 .s-off2 { background: var(--red); color: #fff; font: 700 11px var(--rey-font); border-radius: calc(7px * var(--rey-r)); padding: 4px 8px; } .rey-ui .s-pr2 .s-old { font: 400 12px var(--rey-font); color: #c0c4ca; text-decoration: line-through; } .rey-ui .s-pr2 b { font: 800 16.5px var(--rey-font); color: var(--navy); } .rey-ui .s-pr2 small { font: 400 11px var(--rey-font); color: var(--text-3); } .rey-ui .seller-row .btn-primary { border-radius: calc(11px * var(--rey-r)); padding: 12px 24px; } @media (max-width: 1280px) { .rey-ui /* صفحه محصول: باکس خرید زیر گالری/اطلاعات */ .pd-grid { grid-template-columns: 320px 1fr; } .rey-ui .buy-box { grid-column: 1 / -1; position: static; } } @media (max-width: 1024px) { .rey-ui .trust { flex-wrap: wrap; } .rey-ui .trust > div { flex: 1 1 40%; } .rey-ui .rev-grid { grid-template-columns: 240px 1fr; } } @media (max-width: 860px) { .rey-ui main.container > .pd-grid { margin-top: 14px; } .rey-ui .pd-tabs { position: static; backdrop-filter: none; } .rey-ui .mag-card .date { margin-top: 6px; font-size: 11px; } .rey-ui .trust { flex-wrap: wrap; } .rey-ui .trust > div { flex: 1 1 45%; } .rey-ui .trust span { font-size: 12px; } .rey-ui /* shop pages */ .pd-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; } .rey-ui .gallery, .rey-ui .buy-box { position: static; } .rey-ui .pd-info h1 { font-size: 16px; } .rey-ui .key-specs { grid-template-columns: 1fr 1fr; } .rey-ui .seller-row { grid-template-columns: 1fr; gap: 10px; } .rey-ui .seller-row .s-buy { justify-content: space-between; } .rey-ui .pd-tabs { overflow-x: auto; } .rey-ui .pd-tab { padding: 12px 14px; white-space: nowrap; font-size: 12px; } .rey-ui .spec-row { grid-template-columns: 120px 1fr; } .rey-ui .rev-grid { grid-template-columns: 1fr; } .rey-ui .rev-score { position: static; } .rey-ui .filters-toggle { display: inline-flex; width: 100%; margin-bottom: 10px; } .rey-ui .filters { display: none; position: static; } .rey-ui .filters.open { display: block; } } /* بردکرامب (مطابق ui) */ .rey-ui .breadcrumb { display: flex; align-items: center; gap: 8px; padding-top: 22px; font: 400 11px var(--rey-font); color: var(--muted); flex-wrap: wrap; } .rey-ui .breadcrumb a { color: var(--muted); transition: color .2s; } .rey-ui .breadcrumb a:hover { color: var(--green); } .rey-ui .breadcrumb .sep { opacity: .5; } .rey-ui .breadcrumb .current { color: var(--text-2); font-weight: 500; } /* ردیف محصولات مرتبط (prow) */ .rey-ui .pd-related-row, .rey-ui #boughtRow, .rey-ui #relatedRow { display: flex; gap: 16px; overflow-x: auto; } .rey-ui .pd-related-row > div, .rey-ui #boughtRow > div, .rey-ui #relatedRow > div { flex: 0 0 190px; display: flex; } .rey-ui .pd-related-row > div > .pcard, .rey-ui #boughtRow > div > .pcard, .rey-ui #relatedRow > div > .pcard { flex: 1; } /* فرم ثبت نظر (استاندارد ووکامرس، ظاهر مینیمال) */ .rey-ui .rev-form { margin-top: 22px; border-top: 1px dashed var(--border); padding-top: 20px; } .rey-ui .rev-form .comment-reply-title { font: 800 15px var(--rey-font); color: var(--navy); display: block; margin-bottom: 14px; } .rey-ui .rev-form label { display: block; font: 500 12.5px var(--rey-font); color: var(--text-2); margin-bottom: 6px; } .rey-ui .rev-form input[type="text"], .rey-ui .rev-form input[type="email"], .rey-ui .rev-form select, .rey-ui .rev-form textarea { width: 100%; max-width: 420px; font: 400 13px var(--rey-font); color: var(--text); background: var(--gray-1); border: 1.5px solid transparent; border-radius: calc(10px * var(--rey-r)); padding: 10px 12px; outline: none; margin-bottom: 14px; } .rey-ui .rev-form textarea { max-width: 100%; } .rey-ui .rev-form input:focus, .rey-ui .rev-form select:focus, .rey-ui .rev-form textarea:focus { border-color: var(--green); background: #fff; } .rey-ui .rev-form .required { color: var(--red); } .rey-ui .rev-form .form-submit input, .rey-ui .rev-form #submit { background: var(--green); color: #fff; border: none; border-radius: 99px; font: 700 13px var(--rey-font); padding: 12px 30px; cursor: pointer; } /* بج تخفیف عمومی (باکس خرید، نوار چسبان، فروشندگان) */ .rey-ui .off-badge { display: inline-block; background: var(--red); color: #fff; font: 700 11px var(--rey-font); border-radius: 99px; padding: 2px 9px; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } } /* باکس یکپارچه‌ی درگاه‌های اقساطی */ .rey-ui .rey-installments { margin-top: 14px; border: 1px solid var(--border); border-radius: calc(14px * var(--rey-r)); padding: 14px; background: var(--surface); } .rey-ui .rey-installments__title { display: flex; align-items: center; gap: 8px; font: 700 12.5px var(--rey-font); color: var(--navy); margin-bottom: 12px; } .rey-ui .rey-installments__title svg { width: 17px; height: 17px; color: var(--green); } .rey-ui .rey-installments__grid { display: flex; flex-direction: column; gap: 8px; } .rey-ui .rey-inst { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border-2); border-radius: calc(11px * var(--rey-r)); background: var(--gray-1); } .rey-ui .rey-inst.is-active { border-color: var(--green-300); background: var(--green-050); } .rey-ui .rey-inst__logo { flex: 0 0 40px; height: 26px; display: flex; align-items: center; } .rey-ui .rey-inst__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .rey-ui .rey-inst__body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .rey-ui .rey-inst__body b { font: 700 12px var(--rey-font); color: var(--text); } .rey-ui .rey-inst__body small { font: 400 10.5px var(--rey-font); color: var(--muted); } .rey-ui .rey-inst__on { flex: 0 0 auto; font: 700 10px var(--rey-font); color: #fff; background: var(--green); border-radius: 99px; padding: 3px 9px; } /* ستاره‌ی امتیاز تعاملی در فرم */ .rey-ui .rey-star-input { display: inline-flex; gap: 4px; margin-bottom: 14px; } .rey-ui .rey-star-input button { background: none; border: none; padding: 0; cursor: pointer; color: #d7dce0; transition: color .15s; } .rey-ui .rey-star-input button svg { width: 26px; height: 26px; display: block; } .rey-ui .rey-star-input button.on { color: #f5a623; } /* باکس «برای ثبت دیدگاه وارد شوید» */ .rey-ui .rev-login { display: flex; align-items: center; gap: 14px; background: var(--gray-1); border: 1px solid var(--border); border-radius: calc(14px * var(--rey-r)); padding: 16px 18px; flex-wrap: wrap; } .rey-ui .rev-login svg { width: 26px; height: 26px; color: var(--green); flex: 0 0 auto; } .rey-ui .rev-login > div { flex: 1; min-width: 0; } .rey-ui .rev-login b { display: block; font: 700 13.5px var(--rey-font); color: var(--navy); } .rey-ui .rev-login span { font: 400 12px var(--rey-font); color: var(--muted); } /* ===== تُست افزودن به سبد مقایسه (صفحه‌ی محصول) ===== */ .rey-cmp-toast { position: fixed; z-index: 9999; right: 50%; bottom: 24px; transform: translate(50%, 20px); max-width: 92vw; background: var(--navy); color: #fff; font: 500 13px var(--rey-font); line-height: 1.7; padding: 12px 18px; border-radius: calc(12px * var(--rey-r)); box-shadow: 0 12px 34px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease, visibility .22s; text-align: center; } .rey-cmp-toast.show { opacity: 1; visibility: visible; transform: translate(50%, 0); } /* ===== حالت ناموجود در صفحه‌ی محصول ===== */ .rey-ui .bb-stock.oos { color: var(--red); } .rey-ui .bb-stock.oos i { background: var(--red); } .rey-ui .bb-oos { display: flex; gap: 12px; align-items: flex-start; background: #fef2f4; border: 1px solid #f7c9d2; border-radius: calc(14px * var(--rey-r)); padding: 14px 16px; } .rey-ui .bb-oos svg { width: 30px; height: 30px; color: var(--red); flex: 0 0 auto; margin-top: 2px; } .rey-ui .bb-oos b { display: block; font: 700 14px var(--rey-font); color: var(--red); margin-bottom: 3px; } .rey-ui .bb-oos span { font: 400 12px/1.7 var(--rey-font); color: var(--muted); } .rey-ui .buy-sticky .bsk-oos { font: 700 15px var(--rey-font); color: var(--red); background: #fef2f4; border: 1px solid #f7c9d2; border-radius: calc(12px * var(--rey-r)); padding: 10px 26px; white-space: nowrap; } /* ===== فرم تنوع محصول متغیر (رنگ/مدل و…) در باکس خرید ===== */ .rey-ui .bb-variable .variations { width: 100%; border-collapse: collapse; margin: 0 0 12px; } .rey-ui .bb-variable .variations tr { display: block; margin-bottom: 12px; } .rey-ui .bb-variable .variations th.label { display: block; text-align: right; padding: 0 0 6px; } .rey-ui .bb-variable .variations th.label label { font: 700 13px var(--rey-font); color: var(--navy); } .rey-ui .bb-variable .variations td.value { display: block; position: relative; } .rey-ui .bb-variable .variations select { width: 100%; font: 500 13.5px var(--rey-font); color: var(--text); background: #fff; border: 1.5px solid var(--border); border-radius: calc(12px * var(--rey-r)); padding: 11px 14px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2312303f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; } .rey-ui .bb-variable .variations select:focus { outline: none; border-color: var(--green); } .rey-ui .bb-variable .reset_variations { display: inline-block; font: 500 12px var(--rey-font); color: var(--muted); margin: 2px 0 8px; text-decoration: none; } .rey-ui .bb-variable .woocommerce-variation.single_variation { margin-bottom: 10px; } .rey-ui .bb-variable .woocommerce-variation-price .price, .rey-ui .bb-variable .woocommerce-variation-price .amount { font: 800 20px var(--rey-font); color: var(--navy); } .rey-ui .bb-variable .woocommerce-variation-availability .stock { font: 600 12px var(--rey-font); color: var(--green); margin-top: 4px; } .rey-ui .bb-variable .woocommerce-variation-availability .out-of-stock { color: var(--red); } .rey-ui .bb-variable .woocommerce-variation-add-to-cart { display: flex; gap: 10px; align-items: stretch; } .rey-ui .bb-variable .woocommerce-variation-add-to-cart .quantity { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: calc(12px * var(--rey-r)); overflow: hidden; } .rey-ui .bb-variable .woocommerce-variation-add-to-cart .quantity input.qty { width: 46px; height: 44px; border: 0; text-align: center; font: 700 14px var(--rey-font); background: transparent; -moz-appearance: textfield; } .rey-ui .bb-variable .single_add_to_cart_button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--green); color: #fff; border: 0; border-radius: calc(12px * var(--rey-r)); font: 700 14px var(--rey-font); padding: 12px 20px; cursor: pointer; } .rey-ui .bb-variable .single_add_to_cart_button:hover { filter: brightness(.96); } .rey-ui .bb-variable .single_add_to_cart_button.disabled, .rey-ui .bb-variable .single_add_to_cart_button[disabled] { opacity: .5; cursor: not-allowed; } .rey-ui .bb-variable .woocommerce-variation.single_variation .woocommerce-variation-description { font: 400 12px/1.7 var(--rey-font); color: var(--muted); } /* =========================================================== ستاره‌های امتیاز در فرم دیدگاه ووکامرس با JS خودش