/* ============================================================ TECHBAR PC BUILDER v2 — yüngül, sürətli, uyğunluq yoxlamalı Bütün üslublar .pcb2.pcb2 daxilində — sayt CSS-i ilə toqquşmur ============================================================ */ /* Dizayn tokenləri — həm builder-də, həm də -yə əlavə olunan modallarda lazımdır. rənglər saytın Woodmart dəyərlərindən götürülüb: düymə #1a62e7 · link #1e73be · başlıq #242424 · alt fon #e6effd · şrift Nunito */ .pcb2.pcb2, .pcb2-modal-bg.pcb2-modal-bg{ --blue:#1a62e7; --blue-2:#1350c4; --blue-soft:#e6effd; --blue-soft-2:#cfe0fb; --navy:#060644; --bg:#f4f7fb; --surface:#ffffff; --border:#e4eaf2; --border-2:#c9d6e4; --text:#242424; --text-2:#55647a; --text-3:#8a9cb0; --green:#1e9e5a; --green-soft:#e5f7ed; --red:#d64541; --red-soft:#fdecea; --amber:#9a6d10; --amber-soft:#fff6e0; --amber-border:#eed9a0; --grad:linear-gradient(135deg,#060644 0%,#1a62e7 100%); --sh-sm:0 1px 3px rgba(16,40,70,.07); --sh-md:0 5px 18px rgba(16,40,70,.10); --sh-lg:0 14px 40px rgba(10,30,60,.18); --r:14px; --r-sm:9px; font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; color:var(--text); font-size:14px; line-height:1.45; }.pcb2.pcb2{ background:var(--bg); border-radius:var(--r); padding:18px; margin:10px 0 30px; }.pcb2.pcb2 *, .pcb2-modal-bg.pcb2-modal-bg *{box-sizing:border-box; margin:0; padding:0;}.pcb2.pcb2 button, .pcb2-modal-bg.pcb2-modal-bg button{font-family:inherit; cursor:pointer;}.pcb2.pcb2 img{max-width:100%;}/* ============ ÜMUMİ QURULUŞ ============ */ .pcb2-wrap.pcb2-wrap{display:grid; grid-template-columns:340px 1fr; gap:18px; align-items:start;} @media (max-width:900px){.pcb2-wrap.pcb2-wrap{grid-template-columns:1fr;} }/* ============ SOL: YIĞIM PANELİ ============ */ .pcb2-side.pcb2-side{position:sticky; top:90px; display:flex; flex-direction:column; gap:12px;} @media (max-width:900px){.pcb2-side.pcb2-side{position:static; order:2;} }.pcb2-summary.pcb2-summary{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm);}.pcb2-sum-head.pcb2-sum-head{background:var(--grad); color:#fff; padding:13px 16px;}.pcb2-sum-head.pcb2-sum-head h3{font-size:15px; font-weight:800; letter-spacing:.3px; color:#fff;}.pcb2-progress.pcb2-progress{display:flex; align-items:center; gap:10px; margin-top:8px;}.pcb2-bar.pcb2-bar{flex:1; height:6px; background:rgba(255,255,255,.25); border-radius:6px; overflow:hidden;}.pcb2-bar.pcb2-bar i{display:block; height:100%; width:0; background:#7ee2a8; border-radius:6px; transition:width .3s ease;}.pcb2-progress.pcb2-progress span{font-size:11.5px; font-weight:700; color:#d7e9fb; white-space:nowrap;}.pcb2-slots.pcb2-slots{padding:6px 0;}.pcb2-slot.pcb2-slot{display:flex; align-items:center; gap:10px; padding:7px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s ease;}.pcb2-slot.pcb2-slot:last-child{border-bottom:none;}.pcb2-slot.pcb2-slot:hover{background:var(--blue-soft);}.pcb2-slot.pcb2-slot.active{background:var(--blue-soft); box-shadow:inset 3px 0 0 var(--blue);}.pcb2-slot-ico.pcb2-slot-ico{width:34px; height:34px; border-radius:9px; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;}.pcb2-slot.pcb2-slot.done .pcb2-slot-ico{background:var(--green-soft); color:var(--green);}.pcb2-slot-ico.pcb2-slot-ico svg{width:18px; height:18px;}.pcb2-slot-main.pcb2-slot-main{flex:1; min-width:0;}.pcb2-slot-cat.pcb2-slot-cat{display:block; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--text-3); white-space:nowrap;}.pcb2-slot-val.pcb2-slot-val{display:block; font-size:12px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}.pcb2-slot-val.pcb2-slot-val.empty{color:var(--text-3); font-weight:500; font-style:italic;}.pcb2-slot-x.pcb2-slot-x{border:none; background:none; color:var(--text-3); font-size:15px; padding:4px 6px; border-radius:6px; line-height:1; flex-shrink:0;}.pcb2-slot-x.pcb2-slot-x:hover{background:var(--red-soft); color:var(--red);}.pcb2-total.pcb2-total{padding:14px 16px; border-top:1px solid var(--border); background:var(--surface);}.pcb2-total-row.pcb2-total-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}.pcb2-total-l.pcb2-total-l{font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--text-2);}.pcb2-total-v.pcb2-total-v{font-size:24px; font-weight:900; color:var(--blue-2);}.pcb2-total-hint.pcb2-total-hint{font-size:11.5px; color:var(--text-3); margin-bottom:10px;}.pcb2-actions.pcb2-actions{display:flex; gap:8px;}.pcb2-btn.pcb2-btn{flex:1; border:none; border-radius:var(--r-sm); padding:11px 10px; font-size:13.5px; font-weight:800; letter-spacing:.2px; transition:filter .15s ease,transform .1s ease;}.pcb2-btn.pcb2-btn:disabled{opacity:.45; cursor:not-allowed;}.pcb2-btn.pcb2-btn:not(:disabled):hover{filter:brightness(1.1);}.pcb2-btn.pcb2-btn:not(:disabled):active{transform:translateY(1px);}.pcb2-btn.pcb2-btn.cash{background:var(--green); color:#fff;}.pcb2-btn.pcb2-btn.credit{background:var(--blue); color:#fff;}.pcb2-compat-note.pcb2-compat-note{background:var(--amber-soft); border:1px solid var(--amber-border); color:var(--amber); border-radius:var(--r-sm); padding:9px 12px; font-size:12px; display:none;}.pcb2-compat-note.pcb2-compat-note.show{display:block;}/* ============ SAĞ: KATEQORİYA + MƏHSULLAR ============ */ .pcb2-main.pcb2-main{min-width:0;}.pcb2-tabs.pcb2-tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; margin-bottom:12px; scrollbar-width:thin;}.pcb2-tabs.pcb2-tabs::-webkit-scrollbar{height:5px;}.pcb2-tabs.pcb2-tabs::-webkit-scrollbar-thumb{background:var(--border-2); border-radius:5px;}.pcb2-tab.pcb2-tab{display:flex; align-items:center; gap:7px; border:1px solid var(--border-2); background:var(--surface); color:var(--text-2); border-radius:24px; padding:8px 14px; font-size:12.5px; font-weight:700; white-space:nowrap; flex-shrink:0; transition:all .15s ease;}.pcb2-tab.pcb2-tab svg{width:15px; height:15px;}.pcb2-tab.pcb2-tab:hover{border-color:var(--blue); color:var(--blue);}.pcb2-tab.pcb2-tab.on{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:var(--sh-sm);}.pcb2-tab.pcb2-tab .tick{display:none; width:15px; height:15px; border-radius:50%; background:var(--green); color:#fff; font-size:9px; align-items:center; justify-content:center; font-weight:900;}.pcb2-tab.pcb2-tab.done .tick{display:inline-flex;}.pcb2-tab.pcb2-tab.on .tick{background:#7ee2a8; color:#0f3f6e;}.pcb2-toolbar.pcb2-toolbar{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; align-items:center;}.pcb2-search.pcb2-search{flex:1; min-width:180px; position:relative;}.pcb2-search.pcb2-search input{width:100%; border:1px solid var(--border-2); border-radius:var(--r-sm); padding:9px 12px 9px 34px; font-size:13px; font-family:inherit; background:var(--surface); color:var(--text);}.pcb2-search.pcb2-search input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);}.pcb2-search.pcb2-search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-3);}.pcb2-sort.pcb2-sort{border:1px solid var(--border-2); border-radius:var(--r-sm); padding:9px 10px; font-size:12.5px; font-family:inherit; background:var(--surface); color:var(--text-2); font-weight:600;}.pcb2-chip.pcb2-chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border-2); background:var(--surface); border-radius:20px; padding:7px 12px; font-size:12px; font-weight:700; color:var(--text-2); user-select:none; cursor:pointer;}.pcb2-chip.pcb2-chip input{accent-color:var(--blue); width:14px; height:14px; cursor:pointer;}.pcb2-count.pcb2-count{font-size:12px; color:var(--text-3); font-weight:600; margin-left:auto;}.pcb2-grid.pcb2-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}.pcb2-card.pcb2-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:7px; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; position:relative;}.pcb2-card.pcb2-card:hover{transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--blue-soft-2);}.pcb2-card.pcb2-card.sel{border-color:var(--green); box-shadow:0 0 0 2px var(--green-soft);}.pcb2-card.pcb2-card.incompat{opacity:.45;}.pcb2-card.pcb2-card.incompat::after{content:"uyğun deyil"; position:absolute; top:8px; left:8px; background:var(--red); color:#fff; font-size:9px; font-weight:800; letter-spacing:.4px; padding:2px 7px; border-radius:5px;}.pcb2-card.pcb2-card a.imglink{display:block; text-align:center;}.pcb2-card.pcb2-card img{width:100%; height:110px; object-fit:contain; background:#fff; border-radius:8px;}.pcb2-card.pcb2-card .noimg{width:100%; height:110px; display:flex; align-items:center; justify-content:center; color:var(--text-3); background:var(--bg); border-radius:8px; font-size:22px;}.pcb2-name.pcb2-name{font-size:11.8px; font-weight:700; line-height:1.35; color:var(--text); flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-decoration:none;}a.pcb2-name.pcb2-name:hover{color:var(--blue);}.pcb2-diff.pcb2-diff{font-size:11.5px; font-weight:800; min-height:15px;}.pcb2-diff.pcb2-diff.plus{color:var(--red);}.pcb2-diff.pcb2-diff.minus{color:var(--green);}.pcb2-pick.pcb2-pick{border:none; background:var(--blue); color:#fff; border-radius:8px; padding:8px; font-size:12.5px; font-weight:800; transition:background .15s ease;}.pcb2-pick.pcb2-pick:hover{background:var(--blue-2);}.pcb2-card.pcb2-card.sel .pcb2-pick{background:var(--green); cursor:default;}.pcb2-more.pcb2-more{display:block; margin:16px auto 0; border:1px solid var(--border-2); background:var(--surface); color:var(--text-2); border-radius:24px; padding:10px 26px; font-size:13px; font-weight:800;}.pcb2-more.pcb2-more:hover{border-color:var(--blue); color:var(--blue);}.pcb2-empty.pcb2-empty{text-align:center; color:var(--text-3); padding:40px 10px; font-size:13.5px;}.pcb2-skel.pcb2-skel{height:210px; border-radius:12px; background:linear-gradient(100deg,var(--surface) 40%,var(--bg) 50%,var(--surface) 60%); background-size:200% 100%; animation:pcb2shine 1.2s infinite;} @keyframes pcb2shine{to{background-position:-200% 0;}}/* ============ MODAL (sifariş formaları) ============ */ .pcb2-modal-bg.pcb2-modal-bg{position:fixed; inset:0; background:rgba(8,18,32,.55); backdrop-filter:blur(3px); display:none; align-items:flex-start; justify-content:center; z-index:99999; overflow:auto; padding:40px 12px;}.pcb2-modal-bg.pcb2-modal-bg.open{display:flex;}.pcb2-modal.pcb2-modal{background:#fff; border-radius:16px; padding:24px; width:100%; max-width:480px; box-shadow:var(--sh-lg); font-family:inherit;}.pcb2-modal.pcb2-modal h2{font-size:17px; font-weight:800; color:var(--text); margin-bottom:4px;}.pcb2-sum.pcb2-sum{font-size:13.5px; color:var(--text-2); margin-bottom:14px;}.pcb2-sum.pcb2-sum b{color:var(--green); font-size:16px; font-weight:900;}.pcb2-field.pcb2-field{margin-bottom:11px;}.pcb2-field.pcb2-field label, .pcb2-lbl.pcb2-lbl{display:block; font-size:11.5px; font-weight:800; color:var(--text-2); margin-bottom:4px; letter-spacing:.2px;}.pcb2-field.pcb2-field input, .pcb2-field.pcb2-field textarea, .pcb2-field.pcb2-field select{width:100%; border:1px solid var(--border-2); border-radius:var(--r-sm); padding:9px 11px; font-size:13.5px; font-family:inherit; color:var(--text); background:#fff;}.pcb2-field.pcb2-field input:focus, .pcb2-field.pcb2-field textarea:focus, .pcb2-field.pcb2-field select:focus, .pcb2-phone.pcb2-phone select:focus, .pcb2-phone.pcb2-phone input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);}.pcb2-row.pcb2-row{display:flex; gap:10px;}.pcb2-row.pcb2-row .pcb2-field{flex:1; min-width:0;}/* kredit müddəti seçicisi */ .pcb2-terms.pcb2-terms{display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap;}.pcb2-term.pcb2-term{border:1px solid var(--border-2); background:#fff; color:var(--text-2); border-radius:20px; padding:7px 14px; font-size:12.5px; font-weight:800; transition:all .15s ease;}.pcb2-term.pcb2-term:hover{border-color:var(--blue); color:var(--blue);}.pcb2-term.pcb2-term.on{background:var(--blue); border-color:var(--blue); color:#fff;}.pcb2-monthly.pcb2-monthly{font-size:13px; color:var(--text-2); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border);}.pcb2-monthly.pcb2-monthly b{color:var(--blue); font-size:15px; font-weight:900;}/* telefon sətirləri */ .pcb2-phones.pcb2-phones{display:flex; flex-direction:column; gap:7px; margin-bottom:6px;}.pcb2-phone.pcb2-phone{display:flex; gap:7px;}.pcb2-phone.pcb2-phone select{width:88px; flex-shrink:0; border:1px solid var(--border-2); border-radius:var(--r-sm); padding:9px 8px; font-size:13px; font-family:inherit; background:#fff; color:var(--text); font-weight:600;}.pcb2-phone.pcb2-phone input{flex:1; min-width:0; border:1px solid var(--border-2); border-radius:var(--r-sm); padding:9px 11px; font-size:13.5px; font-family:inherit; color:var(--text);}.pcb2-otp.pcb2-otp{letter-spacing:6px; text-align:center; font-size:20px !important; font-weight:800;}.pcb2-consent.pcb2-consent{display:flex; gap:9px; align-items:flex-start; font-size:10.5px; color:var(--text-2); line-height:1.55; margin:12px 0; cursor:pointer;}.pcb2-consent.pcb2-consent input{width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--blue); cursor:pointer;}.pcb2-send.pcb2-send{width:100%; border:none; border-radius:var(--r-sm); background:var(--green); color:#fff; padding:12px; font-size:14.5px; font-weight:800; font-family:inherit; cursor:pointer; transition:filter .15s ease;}.pcb2-send.pcb2-send:hover{filter:brightness(1.08);}.pcb2-send.pcb2-send.blue{background:var(--blue);}.pcb2-send.pcb2-send:disabled{opacity:.5; cursor:not-allowed;}.pcb2-close.pcb2-close{float:right; border:none; background:none; font-size:20px; color:var(--text-3); line-height:1; padding:2px 8px; border-radius:7px; cursor:pointer;}.pcb2-close.pcb2-close:hover{background:var(--bg); color:var(--text);}.pcb2-ok.pcb2-ok{text-align:center; padding:20px 0;}.pcb2-ok.pcb2-ok h2{margin-bottom:8px;}.pcb2-ok.pcb2-ok .pcb2-sum{margin-bottom:18px;}.pcb2-ok.pcb2-ok .ico{width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:900;}/* ============ SEO MƏTN BLOKU ============ */ .pcb2-seo.pcb2-seo{margin-top:26px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:22px 24px;}.pcb2-seo.pcb2-seo h2{font-size:17px; color:var(--text); margin-bottom:10px; font-weight:800;}.pcb2-seo.pcb2-seo h3{font-size:14px; color:var(--text); margin:14px 0 6px; font-weight:800;}.pcb2-seo.pcb2-seo p{font-size:13px; color:var(--text-2); margin-bottom:8px; line-height:1.65;}/* mobil yekun zolağı */ .pcb2-mobilebar.pcb2-mobilebar{display:none;} @media (max-width:900px){.pcb2-mobilebar.pcb2-mobilebar{display:flex; position:sticky; bottom:0; z-index:50; background:var(--surface); border-top:2px solid var(--blue); padding:10px 14px; align-items:center; justify-content:space-between; gap:10px; border-radius:12px 12px 0 0; box-shadow:0 -6px 20px rgba(10,30,60,.12); margin:14px -18px -18px;}.pcb2-mobilebar.pcb2-mobilebar .st{font-size:12px; font-weight:800; color:var(--text-2);}.pcb2-mobilebar.pcb2-mobilebar .pr{font-size:17px; font-weight:900; color:var(--blue-2);} } /* ============================================================ WOODMART TEMA QORUYUCULARI Tema base.min.css-də bu qaydalar var və builder-i pozur: :is(.btn,.button,button,[type=submit],[type=button]) { background:var(--btn-bgcolor,#F3F3F3) } input, select, textarea { width:100% } Aşağıdakılar onları neytrallaşdırır (spesifiklik + !important). ============================================================ */ .pcb2.pcb2 .pcb2-pick, .pcb2.pcb2 .pcb2-btn, .pcb2.pcb2 .pcb2-tab, .pcb2.pcb2 .pcb2-term, .pcb2.pcb2 .pcb2-slot-x, .pcb2-modal-bg.pcb2-modal-bg .pcb2-send, .pcb2-modal-bg.pcb2-modal-bg .pcb2-term, .pcb2-modal-bg.pcb2-modal-bg .pcb2-close{ box-shadow:none; text-transform:none; letter-spacing:normal; min-height:0; line-height:1.4; } .pcb2.pcb2 .pcb2-pick{ background:var(--blue) !important; color:#fff !important; } .pcb2.pcb2 .pcb2-pick:hover{ background:var(--blue-2) !important; } .pcb2.pcb2 .pcb2-card.sel .pcb2-pick{ background:var(--green) !important; } .pcb2.pcb2 .pcb2-btn.cash{ background:var(--green) !important; color:#fff !important; } .pcb2.pcb2 .pcb2-btn.credit{ background:var(--blue) !important; color:#fff !important; } .pcb2.pcb2 .pcb2-tab{ background:var(--surface) !important; color:var(--text-2) !important; } .pcb2.pcb2 .pcb2-tab.on{ background:var(--blue) !important; color:#fff !important; } .pcb2.pcb2 .pcb2-slot-x{ background:none !important; color:var(--text-3) !important; } .pcb2.pcb2 .pcb2-slot-x:hover{ background:var(--red-soft) !important; color:var(--red) !important; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-send{ background:var(--green) !important; color:#fff !important; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-send.blue{ background:var(--blue) !important; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-close{ background:none !important; color:var(--text-3) !important; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-term{ background:#fff !important; color:var(--text-2) !important; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-term.on{ background:var(--blue) !important; color:#fff !important; } /* forma elementləri: tema width:100% + öz hündürlüyünü tətbiq edir */ .pcb2.pcb2 .pcb2-sort{ width:auto !important; height:auto !important; margin:0 !important; } .pcb2.pcb2 .pcb2-search input{ width:100% !important; height:auto !important; margin:0 !important; } .pcb2.pcb2 .pcb2-chip input{ width:14px !important; height:14px !important; margin:0 !important; } .pcb2-modal-bg.pcb2-modal-bg input, .pcb2-modal-bg.pcb2-modal-bg select, .pcb2-modal-bg.pcb2-modal-bg textarea{ height:auto !important; margin:0 !important; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-phone select{ width:88px !important; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-consent input{ width:18px !important; height:18px !important; } /* şəkillər: tema lazy-load/animasiya tətbiq edə bilər */ /* tema lazy-load animasiyasını söndür — transform-a toxunma, o, yaxınlaşdırma üçündür */ .pcb2.pcb2 .pcb2-card img{ display:block !important; opacity:1 !important; animation:none !important; } .pcb2.pcb2 .pcb2-card a.imglink{ text-decoration:none !important; border:none !important; } .pcb2.pcb2 .pcb2-name{ text-decoration:none !important; } /* ============ GRID: sətirdə həmişə 5 məhsul ============ Desktopda dəyişmir (istifadəçi tələbi). Yalnız sidebar aşağı düşəndən (900px) sonra telefon üçün azalır. */ .pcb2.pcb2 .pcb2-grid{ grid-template-columns:repeat(5,1fr); gap:8px; } @media (max-width:760px){ .pcb2.pcb2 .pcb2-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:520px){ .pcb2.pcb2 .pcb2-grid{ grid-template-columns:repeat(2,1fr); } } /* 5 sütunda kartlar daralır — şəkil və mətn ölçüsünü uyğunlaşdır */ .pcb2.pcb2 .pcb2-card{ padding:8px; gap:5px; } .pcb2.pcb2 .pcb2-card img,.pcb2.pcb2 .pcb2-card .noimg{ height:88px; } .pcb2.pcb2 .pcb2-name{ font-size:10.8px; line-height:1.3; -webkit-line-clamp:3; } .pcb2.pcb2 .pcb2-diff{ font-size:10.5px; min-height:13px; } .pcb2.pcb2 .pcb2-pick{ padding:6px 4px; font-size:11.5px; } .pcb2.pcb2 .pcb2-card.incompat::after{ font-size:8px; padding:1px 5px; } /* ============ KREDİT FORMASI (saytdakı forma ilə eyni) ============ */ .pcb2-modal-bg.pcb2-modal-bg .pcb2-modal{ max-width:560px; } .pcb2-credit-sum.pcb2-credit-sum{ background:var(--surface-2,#f4f7fb); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:14px; } .pcb2-cs-row.pcb2-cs-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:3px 0; font-size:13px; color:var(--text-2); } .pcb2-cs-row.pcb2-cs-row b{ font-size:15px; font-weight:900; color:var(--text); } .pcb2-cs-row.pcb2-cs-row b.green{ color:var(--green); font-size:17px; } .pcb2-cs-row.pcb2-cs-row b.blue{ color:var(--blue); font-size:16px; } /* müddət düymələri: ay + aylıq ödəniş */ /* 4 muddet: 6, 12, 18, 24 ay (kredit). Evvel 6 sutun idi — taksitin 2/3 ay variantlari da vardi. */ .pcb2-modal-bg.pcb2-modal-bg .pcb2-terms{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:16px; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-term{ display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid var(--border-2); background:#fff; color:var(--text-2); border-radius:10px; padding:8px 3px; transition:all .15s ease; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-term .m{ font-size:12.5px; font-weight:800; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-term .p{ font-size:9.5px; font-weight:700; opacity:.75; white-space:nowrap; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-term:hover{ border-color:var(--blue); color:var(--blue); } .pcb2-modal-bg.pcb2-modal-bg .pcb2-term.on{ background:var(--blue) !important; border-color:var(--blue); color:#fff !important; } .pcb2-modal-bg.pcb2-modal-bg input[type="file"]{ border:1px dashed var(--border-2); border-radius:var(--r-sm); padding:8px 10px; font-size:12px; background:#fff; width:100%; } @media (max-width:560px){ .pcb2-modal-bg.pcb2-modal-bg .pcb2-terms{ grid-template-columns:repeat(2,1fr); } /* 4 duyme -> 2x2 */ .pcb2-modal-bg.pcb2-modal-bg .pcb2-row{ flex-direction:column; gap:0; } } /* ============================================================ v3 DÜZƏLİŞLƏRİ ============================================================ */ /* --- 1. Məhsul şəkilləri: daha böyük + kənarlardan kəsilmiş (yaxınlaşdırılmış) --- */ .pcb2.pcb2 .pcb2-card a.imglink{ display:block; overflow:hidden; border-radius:8px; background:#fff; height:140px; } .pcb2.pcb2 .pcb2-card img{ height:140px !important; width:100%; object-fit:cover; object-position:center; transform:none !important; transition:transform .2s ease; } .pcb2.pcb2 .pcb2-card:hover img{ transform:scale(1.06) !important; } .pcb2.pcb2 .pcb2-card .noimg{ height:140px; } /* --- 2. Scroll: sol panel yerində qalır, yalnız sağ hissə sürüşür --- */ .pcb2.pcb2 .pcb2-side{ position:sticky; top:20px; align-self:start; max-height:calc(100vh - 40px); overflow-y:auto; overscroll-behavior:contain; transition:top .25s ease; } /* Woodmart yapisqan header (whb-sticked, yuxari scroll-da cixir, h=60px) panelin "Senin yigimin"+Sifirla basligini ortmesin — header gorunende panel asagi surusur */ body:has(.whb-header.whb-sticked) .pcb2.pcb2 .pcb2-side{ top:80px; max-height:calc(100vh - 100px); } /* admin bar (32px) yalniz adminlerde var — header onun altina dusur */ body.admin-bar:has(.whb-header.whb-sticked) .pcb2.pcb2 .pcb2-side{ top:112px; max-height:calc(100vh - 132px); } .pcb2.pcb2 .pcb2-side::-webkit-scrollbar{ width:5px; } .pcb2.pcb2 .pcb2-side::-webkit-scrollbar-thumb{ background:var(--border-2); border-radius:5px; } @media (max-width:900px){ .pcb2.pcb2 .pcb2-side{ position:static; max-height:none; overflow:visible; } } /* --- 3. Keys şəkli (v1-dəki kimi) --- */ .pcb2-hero.pcb2-hero{ position:relative; background:#fff; border-bottom:1px solid var(--border); padding:12px; text-align:center; } .pcb2-hero.pcb2-hero img{ width:100%; height:170px; object-fit:contain; display:block; } .pcb2-hero-cap.pcb2-hero-cap{ display:block; margin-top:6px; font-size:11px; font-weight:700; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pcb2-hero-cap.pcb2-hero-cap.empty{ color:var(--text-3); font-weight:500; font-style:italic; } /* --- 4. Hissələr / Aksesuarlar keçidi --- */ .pcb2-groups.pcb2-groups{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; } .pcb2-group.pcb2-group{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; border:1px solid var(--border-2); background:var(--surface) !important; color:var(--text-2) !important; border-radius:12px; padding:10px 14px; text-align:left; transition:all .15s ease; } .pcb2-group.pcb2-group b{ font-size:13px; font-weight:800; } .pcb2-group.pcb2-group span{ font-size:10.5px; opacity:.7; } .pcb2-group.pcb2-group:hover{ border-color:var(--blue); color:var(--blue) !important; } .pcb2-group.pcb2-group.on{ background:var(--blue) !important; border-color:var(--blue); color:#fff !important; } @media (max-width:520px){ .pcb2-groups.pcb2-groups{ grid-template-columns:1fr; } } /* --- aksesuar ayırıcısı sol paneldə --- */ .pcb2-slot-sep.pcb2-slot-sep{ padding:7px 14px 4px; font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--text-3); background:var(--bg); border-top:1px solid var(--border); } /* ============================================================ v4 DUZELISLERI ============================================================ */ /* --- Yekun qiymet HEMISE gorunsun --- Problem: 9 hisse + aksesuarlar secilende siyahi uzanirdi ve qiymet panelin dibine dusub ekrandan cixirdi. Hell: panel = sutun; yalniz ORTA hisse (slotlar) surusur, basliq yuxarida, qiymet+duymeler asagida sabit qalir. */ .pcb2.pcb2 .pcb2-side{ overflow:visible; max-height:calc(100vh - 40px); } .pcb2.pcb2 .pcb2-summary{ display:flex; flex-direction:column; max-height:calc(100vh - 40px); } .pcb2.pcb2 .pcb2-sum-head, .pcb2.pcb2 .pcb2-hero, .pcb2.pcb2 .pcb2-total{ flex-shrink:0; } .pcb2.pcb2 .pcb2-slots{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } .pcb2.pcb2 .pcb2-slots::-webkit-scrollbar{ width:5px; } .pcb2.pcb2 .pcb2-slots::-webkit-scrollbar-thumb{ background:var(--border-2); border-radius:5px; } .pcb2.pcb2 .pcb2-total{ border-top:1px solid var(--border); box-shadow:0 -4px 12px rgba(16,40,70,.06); } /* --- Alçaq ekranlarda (15.6" noutbuk = 768px) panelin ARTIQ SCROLL-u --- Problem: 768px hündürlükdə heç nə seçilməmiş belə slot siyahısı sığmırdı və sol panelin kənarında ikinci sürüşdürmə zolağı görünürdü. Həll: sətirləri yığcamlaşdır — 9 slot (8 hissə + monitor) scroll olmadan sığsın. Siyahı uzananda (aksesuarlar əlavə olunanda) scroll yenə də işə düşür. */ @media (max-height:900px){ .pcb2.pcb2 .pcb2-hero{ height:96px; padding:6px; } .pcb2.pcb2 .pcb2-hero img{ height:84px !important; } .pcb2.pcb2 .pcb2-hero-cap{ font-size:9.5px; bottom:2px; } .pcb2.pcb2 .pcb2-slot{ padding:4px 12px; } .pcb2.pcb2 .pcb2-slot-ico{ width:28px; height:28px; border-radius:7px; } .pcb2.pcb2 .pcb2-slot-ico svg{ width:15px; height:15px; } .pcb2.pcb2 .pcb2-slot-cat{ font-size:9px; } .pcb2.pcb2 .pcb2-slot-val{ font-size:11px; } .pcb2.pcb2 .pcb2-sum-head{ padding:9px 14px; } .pcb2.pcb2 .pcb2-sum-head h3{ font-size:13.5px; } .pcb2.pcb2 .pcb2-total{ padding:10px 14px; } .pcb2.pcb2 .pcb2-total-v{ font-size:20px; } .pcb2.pcb2 .pcb2-btn{ padding:9px 8px; font-size:12.5px; } } @media (max-height:680px){ .pcb2.pcb2 .pcb2-hero{ display:none; } } @media (max-width:900px){ .pcb2.pcb2 .pcb2-side, .pcb2.pcb2 .pcb2-summary{ max-height:none; } .pcb2.pcb2 .pcb2-slots{ overflow:visible; } .pcb2.pcb2 .pcb2-hero{ display:block; } .pcb2.pcb2 .pcb2-hero img{ height:170px; } } /* --- "Daha cox yukle" (sehifeleme evezine) --- */ .pcb2-more.pcb2-more{ display:block; margin:18px auto 0; border:1px solid var(--border-2); background:var(--surface) !important; color:var(--text-2) !important; border-radius:24px; padding:11px 30px; font-size:13px; font-weight:800; transition:all .15s ease; } .pcb2-more.pcb2-more:hover{ border-color:var(--blue); color:var(--blue) !important; background:var(--blue-soft) !important; } .pcb2-more-info.pcb2-more-info{ display:block; text-align:center; font-size:11.5px; color:var(--text-3); margin-top:8px; } /* --- STICKY DUZELISI --- Saytin kredit-taksit.js fayli her sehifede body-ye inline `overflow:auto` qoyur. Bu, sol panelin position:sticky islemesini sindirir (sticky en yaxin surusen valideyne baglanir). Bu CSS yalniz builder sehifesinde yuklenir, ona gore burada tehlukesiz sekilde neytrallasdiririq. */ html, body{ overflow-x:clip !important; overflow-y:visible !important; } /* overflow-x:clip (hidden YOX): kesir amma scroll konteyneri yaratmir — sticky islek qalir. Sebeb: Woodmart-in gizli dropdown-lari (my-account ve s.) ekranin sagina dasir -> horizontal scroll. */ /* sifaris modali acilanda arxa fon surusmesin */ html.pcb2-lock, body.pcb2-lock{ overflow:hidden !important; } /* ============================================================ v5 — Sıfırla düyməsi · açıq qiymətlər · "eyni qiymət" ============================================================ */ /* --- Seçimi sıfırla --- */ .pcb2-sum-top.pcb2-sum-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .pcb2.pcb2 .pcb2-reset{ border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12) !important; color:#fff !important; border-radius:20px; padding:4px 11px; font-size:11px; font-weight:800; white-space:nowrap; transition:background-color .15s ease, border-color .15s ease; } .pcb2.pcb2 .pcb2-reset:hover{ background:var(--red) !important; border-color:var(--red); } /* --- Monitor + aksesuarlarda açıq qiymət --- */ .pcb2-price.pcb2-price{ font-size:14px; font-weight:900; color:var(--text); line-height:1.2; } /* --- fərq sətri: eyni qiymət / seçilmiş variant --- */ .pcb2-diff.pcb2-diff.same{ color:var(--text-3); font-weight:600; font-size:10.5px; } /* ============================================================ SURETLI BAXIS (quick view) — kartin sekline/adina klik ============================================================ */ .pcb2.pcb2 .pcb2-card .imglink, .pcb2.pcb2 .pcb2-card .pcb2-name{ cursor:pointer; } .pcb2.pcb2 .pcb2-card .pcb2-name:hover{ color:var(--blue); } .pcb2-modal-bg.pcb2-modal-bg .pcb2-qv{ max-width:860px; padding:22px; } .pcb2-qv-grid.pcb2-qv-grid{ display:grid; grid-template-columns:330px 1fr; gap:22px; } @media (max-width:760px){ .pcb2-qv-grid.pcb2-qv-grid{ grid-template-columns:1fr; gap:14px; } } .pcb2-qv-img.pcb2-qv-img{ background:#fff; border:1px solid var(--border); border-radius:12px; height:290px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .pcb2-qv-img.pcb2-qv-img img{ max-width:100%; max-height:100%; object-fit:contain; } .pcb2-qv-thumbs.pcb2-qv-thumbs{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; } .pcb2-qv-th.pcb2-qv-th{ width:56px; height:56px; object-fit:contain; background:#fff; padding:3px; border:1px solid var(--border-2); border-radius:8px; cursor:pointer; transition:border-color .15s ease; } .pcb2-qv-th.pcb2-qv-th:hover{ border-color:var(--blue); } .pcb2-qv-th.pcb2-qv-th.on{ border-color:var(--blue); box-shadow:0 0 0 2px var(--blue-soft); } .pcb2-qv-right.pcb2-qv-right{ display:flex; flex-direction:column; min-width:0; } .pcb2-qv-cat.pcb2-qv-cat{ font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--blue); margin-bottom:4px; } .pcb2-qv-name.pcb2-qv-name{ font-size:17px; font-weight:800; color:var(--text); line-height:1.35; margin:0 0 4px; } .pcb2-qv-sku.pcb2-qv-sku{ font-size:11.5px; color:var(--text-3); font-weight:600; margin-bottom:10px; } .pcb2-qv-warn.pcb2-qv-warn{ background:var(--amber-soft); border:1px solid var(--amber-border); color:var(--amber); border-radius:8px; padding:7px 10px; font-size:12px; font-weight:600; margin-bottom:10px; } .pcb2-qv-specs.pcb2-qv-specs{ flex:1; min-height:60px; } .pcb2-qv-load.pcb2-qv-load{ font-size:12.5px; color:var(--text-3); padding:8px 0; } .pcb2-qv-list.pcb2-qv-list{ margin:0 0 10px; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:5px 14px; } @media (max-width:760px){ .pcb2-qv-list.pcb2-qv-list{ grid-template-columns:1fr; } } .pcb2-qv-list.pcb2-qv-list li{ position:relative; padding-left:15px; font-size:12.5px; color:var(--text-2); line-height:1.45; } .pcb2-qv-list.pcb2-qv-list li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--blue-soft-2); } .pcb2-qv-tbl.pcb2-qv-tbl{ width:100%; border-collapse:collapse; margin-bottom:8px; background:transparent; } .pcb2-qv-tbl.pcb2-qv-tbl td{ padding:5px 0; font-size:12.5px; border-bottom:1px solid var(--border); } .pcb2-qv-tbl.pcb2-qv-tbl td:first-child{ color:var(--text-3); font-weight:700; width:38%; } .pcb2-qv-tbl.pcb2-qv-tbl td:last-child{ color:var(--text); font-weight:600; } .pcb2-qv-foot.pcb2-qv-foot{ border-top:1px solid var(--border); padding-top:12px; margin-top:10px; } .pcb2-qv-price.pcb2-qv-price{ font-size:22px; font-weight:900; color:var(--text); line-height:1.2; } .pcb2-qv-diff.pcb2-qv-diff{ font-size:12.5px; font-weight:800; margin-top:2px; } .pcb2-qv-diff.pcb2-qv-diff.plus{ color:var(--red); } .pcb2-qv-diff.pcb2-qv-diff.minus{ color:var(--green); } .pcb2-qv-diff.pcb2-qv-diff.same{ color:var(--text-3); font-weight:600; } .pcb2-qv-acts.pcb2-qv-acts{ display:flex; align-items:center; gap:12px; margin-top:12px; } .pcb2-qv-acts.pcb2-qv-acts .pcb2-send{ flex:1; } .pcb2-qv-link.pcb2-qv-link{ font-size:12.5px; font-weight:700; color:var(--blue) !important; white-space:nowrap; text-decoration:none; } .pcb2-qv-link.pcb2-qv-link:hover{ text-decoration:underline; } /* ============================================================ v5: qiymət qeydi — göstərilən qiymət ilkindir ============================================================ */ .pcb2.pcb2 .pcb2-price-note{ background:var(--blue-soft); border:1px solid var(--blue-soft-2); border-radius:var(--r-sm); padding:8px 10px; margin-bottom:10px; font-size:10.5px; line-height:1.5; color:var(--blue-2); font-weight:600; } .pcb2.pcb2 .pcb2-price-note b{ font-weight:900; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-note-inline{ background:var(--blue-soft); border:1px solid var(--blue-soft-2); border-radius:8px; padding:8px 10px; margin-top:8px; font-size:10.5px; line-height:1.5; color:var(--blue-2); font-weight:600; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-note-inline b{ font-weight:900; } @media (max-height:900px){ .pcb2.pcb2 .pcb2-price-note{ font-size:9.5px; padding:6px 8px; margin-bottom:7px; } } /* ============================================================ v5: kartlar bir az böyük + qısa texniki mətn İlkin: «mehsul kartlarina oxshar ama onun qeder boyuk olmasin, daha balaca kompakt ama datalar da gorunsun» Sətirdə 5 kart qalır (istifadəçi tələbi) — kart hündürlüyü artır, eni yox. ============================================================ */ .pcb2.pcb2 .pcb2-card{ padding:9px; gap:6px; } .pcb2.pcb2 .pcb2-card a.imglink, .pcb2.pcb2 .pcb2-card .imglink{ height:150px; } .pcb2.pcb2 .pcb2-card img{ height:150px !important; } .pcb2.pcb2 .pcb2-card .noimg{ height:150px; } .pcb2.pcb2 .pcb2-name{ font-size:11.5px; -webkit-line-clamp:2; min-height:29px; } .pcb2.pcb2 .pcb2-desc{ font-size:9.5px; line-height:1.35; color:var(--text-3); font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:25px; } .pcb2.pcb2 .pcb2-price{ font-size:13px; } .pcb2.pcb2 .pcb2-pick{ padding:7px 4px; font-size:12px; } /* dar ekranlarda mətn yer tutmasın */ @media (max-width:760px){ .pcb2.pcb2 .pcb2-desc{ display:none; } .pcb2.pcb2 .pcb2-card a.imglink, .pcb2.pcb2 .pcb2-card .imglink, .pcb2.pcb2 .pcb2-card img, .pcb2.pcb2 .pcb2-card .noimg{ height:120px !important; } } /* ============================================================ HAZIR SISTEMLER (Gaming PC) — 2026-07-18 ============================================================ */ .pcb2.pcb2 .pcb2-rs-badge{ position:absolute; top:8px; left:8px; z-index:2; background:var(--blue); color:#fff; font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:20px; letter-spacing:.3px; } .pcb2.pcb2 .pcb2-rs .imglink{ position:relative; } .pcb2.pcb2 .pcb2-rs .pcb2-price{ display:block; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-view{ display:flex; flex-direction:column; gap:10px; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-img{ max-height:220px; object-fit:contain; align-self:center; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-meta{ display:flex; gap:8px; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-meta span{ background:var(--blue-soft); color:var(--blue-2); border:1px solid var(--blue-soft-2); font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-blurb{ font-size:13px; line-height:1.55; color:var(--text-2); margin:0; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-games{ width:100%; border-collapse:collapse; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-games th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-3); padding:6px 10px; background:#f8fafd; border-bottom:1px solid var(--border); } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-games td{ font-size:13px; padding:7px 10px; border-bottom:1px solid var(--border); } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-games td:last-child{ text-align:right; color:var(--blue-2); } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-note{ font-size:10.5px; color:var(--text-3); } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-price{ font-size:22px; font-weight:900; color:var(--blue-2); } .pcb2-modal-bg.pcb2-modal-bg a.pcb2-rs-link{ text-align:center; text-decoration:none; display:block; } /* ============================================================ UI TEKMILLESDIRME 2 (2026-07-18 gece): qruplar bir setir, hero boyudulmesi, oyun sekilleri, mobil/tablet responsive ============================================================ */ /* 3 qrup duymesi BIR setirde */ .pcb2.pcb2 .pcb2-groups{ display:flex; flex-wrap:nowrap; gap:8px; } .pcb2.pcb2 .pcb2-group{ flex:1 1 0; min-width:0; } .pcb2.pcb2 .pcb2-group b, .pcb2.pcb2 .pcb2-group span{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* keys sekli boyudulub, yazi seklin ALTINDA ayrica setirde (ustune ilismir) */ .pcb2.pcb2 .pcb2-hero{ height:auto; padding:10px 10px 6px; } .pcb2.pcb2 .pcb2-hero img{ height:190px !important; width:100%; object-fit:contain; } .pcb2.pcb2 .pcb2-hero-cap{ position:static; display:block; text-align:center; padding:6px 4px 2px; font-size:11px; font-weight:700; color:var(--text-3); background:none; text-shadow:none; } @media (max-height:900px){ .pcb2.pcb2 .pcb2-hero{ height:auto; } .pcb2.pcb2 .pcb2-hero img{ height:120px !important; } } /* modalda oyun sekilleri */ .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-games td.g{ display:flex; align-items:center; gap:10px; font-weight:700; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-gimg{ width:64px; height:30px; object-fit:contain; border-radius:5px; background:#f2f5fa; flex-shrink:0; } /* hazir sistem filterleri (tabs zonasinda) */ .pcb2.pcb2 #pcb2-tabs .pcb2-rsf{ margin:0 6px 4px 0; max-width:190px; } /* ============ TABLET (901-1100px): 2 sutunlu layout ============ */ /* DIQQET: 901-den bashlayir. 761-900 araligi mobil sayilir (side order:2 + mobilebar), evvel 761-den bashlayirdi ve iki qayda toqqushurdu -> esas sutun 300px-e sixilirdi. */ @media (min-width:901px) and (max-width:1100px){ .pcb2.pcb2 .pcb2-grid{ grid-template-columns:repeat(3,1fr) !important; } .pcb2.pcb2 .pcb2-wrap{ grid-template-columns:300px 1fr; } } /* 761-900: mobil rejim (tek sutun, side ashagida) — genish ekran deye 4 kart */ @media (min-width:761px) and (max-width:900px){ .pcb2.pcb2 .pcb2-grid{ grid-template-columns:repeat(4,1fr) !important; } } /* ============ MOBIL (<=760px) ============ */ @media (max-width:760px){ .pcb2.pcb2{ padding:10px; } /* qruplar: ufuqi scroll, sixilmis */ .pcb2.pcb2 .pcb2-groups{ overflow-x:auto; padding-bottom:4px; } .pcb2.pcb2 .pcb2-group{ flex:0 0 auto; min-width:46%; padding:8px 10px; } .pcb2.pcb2 .pcb2-group span{ font-size:10px; } /* toolbar: axtaris tam en, sort/say alta */ .pcb2.pcb2 .pcb2-toolbar{ flex-wrap:wrap; gap:6px; } .pcb2.pcb2 .pcb2-search{ flex:1 1 100%; } /* filterler mobil: tam en yigcam */ .pcb2.pcb2 #pcb2-tabs .pcb2-rsf{ max-width:47%; font-size:12px; } /* modal: ekrana sig, daxili scroll */ .pcb2-modal-bg.pcb2-modal-bg .pcb2-modal{ max-height:92vh; overflow-y:auto; width:94vw; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-img{ max-height:150px; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-gimg{ width:44px; height:22px; } /* hero mobil */ .pcb2.pcb2 .pcb2-hero img{ height:150px !important; } } @media (max-width:520px){ .pcb2.pcb2 .pcb2-grid{ grid-template-columns:repeat(2,1fr) !important; gap:8px; } .pcb2.pcb2 .pcb2-group{ min-width:70%; } } /* ============================================================ MOBIL FIX 2026-07-19: (1) uzun mehsul adlari layoutu genislendirmesin (min-width:0 — flex/grid ellipsis qaydasi), (2) alt sabit bar duymeleri ortmesin, (3) mobilebar toxunuslari kecirsin (yalniz melumat gosterir) ============================================================ */ .pcb2.pcb2 .pcb2-slot-main{ min-width:0; } .pcb2.pcb2 .pcb2-summary, .pcb2.pcb2 .pcb2-side, .pcb2.pcb2 .pcb2-main{ min-width:0; } .pcb2.pcb2 .pcb2-mobilebar{ pointer-events:none; } @media (max-width:900px){ .pcb2.pcb2 .pcb2-wrap > *{ min-width:0; } .pcb2.pcb2{ padding-bottom:84px; } /* sabit barin hundurluyu qeder — duymeler orunmesin */ .pcb2.pcb2 .pcb2-slot-val{ max-width:100%; } } /* ============================================================ MOBIL BAR v2 (2026-07-19c): sifaris duymeleri + qiymet SABIT barda — hem "duymeler islemir" (ortulme) problemini kokden hell edir, hem de qiymet 8/8-de derhal gorunur; info-ya toxunus = komponentlere qayit ============================================================ */ .pcb2.pcb2 .pcb2-mobilebar{ pointer-events:auto; display:none; position:fixed; left:0; right:0; bottom:0; z-index:99999; background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -4px 14px rgba(16,40,70,.12); padding:8px 10px; gap:8px; align-items:center; /* margin:0 MUTLEQDIR: yuxarida sticky rejim ucun margin:14px -18px -18px var idi. Bar fixed olanda (left:0;right:0) o menfi margin qalirsa en 100%+36px olur ve bar her iki terefden ekrandan dasir (390px-de 426px: solda 0/8, sagda Kredit kesilirdi). */ margin:0; } @media (max-width:900px){ .pcb2.pcb2 .pcb2-mobilebar{ display:flex; } } .pcb2.pcb2 .pcb2-mobilebar .mb-info{ flex:1; min-width:0; display:flex; flex-direction:column; cursor:pointer; } .pcb2.pcb2 .pcb2-mobilebar .st{ font-size:10px; font-weight:800; letter-spacing:.4px; color:var(--text-3); text-transform:uppercase; } .pcb2.pcb2 .pcb2-mobilebar .pr{ font-size:16px; font-weight:900; color:var(--blue-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pcb2.pcb2 .pcb2-mb-btn{ border:none; border-radius:9px; padding:10px 14px; font-size:13px; font-weight:800; color:#fff; flex-shrink:0; } .pcb2.pcb2 .pcb2-mb-btn.cash{ background:var(--green); } .pcb2.pcb2 .pcb2-mb-btn.credit{ background:var(--blue); } /* ============================================================ MODAL MOBIL v2 (2026-07-19d): modal YUXARIDAN baslasin, arxa fon scroll etsin — vh-den asililiq yoxdur, "yarimciq modal" mumkun deyil ============================================================ */ @media (max-width:760px){ .pcb2-modal-bg.pcb2-modal-bg{ align-items:flex-start; overflow-y:auto; padding:12px 0 30px; } .pcb2-modal-bg.pcb2-modal-bg .pcb2-modal{ max-height:none; overflow-y:visible; margin:0 auto 30px; width:94vw; } } /* ============================================================ SLOT FULL MOBIL (2026-07-19e): telefonda panel siyahisi TAM gorunsun — max-height:900px yigcamlasdirma qaydalari qisa DESKTOP ekranlar ucundur, telefon hundurluyu de <=900 oldugu ucun daxili scroll yaradirdi (islemirdi) ============================================================ */ @media (max-width:900px){ .pcb2.pcb2 .pcb2-side, .pcb2.pcb2 .pcb2-summary{ max-height:none !important; } .pcb2.pcb2 .pcb2-slots{ max-height:none !important; overflow:visible !important; } .pcb2.pcb2 .pcb2-side{ position:static !important; } } /* ============================================================ MODAL MOBIL v3 (2026-07-19f): - pcb2-center: tesekkur popup MERKEZDE (okScreen elave edir) - notch/safe-area ust boslugu - FORM modallari mobil-de TAM EKRAN vereq — klaviatura acilanda arxa fon gorunmur, gorunus temiz qalir ============================================================ */ .pcb2-modal-bg.pcb2-modal-bg.pcb2-center{ align-items:center !important; padding:16px 0 !important; overflow-y:auto; } @media (max-width:760px){ .pcb2-modal-bg.pcb2-modal-bg{ padding-top:calc(env(safe-area-inset-top, 0px) + 14px); } /* form olan modal = tam ekran vereq */ .pcb2-modal-bg.pcb2-modal-bg:has(form){ padding:0 !important; } .pcb2-modal-bg.pcb2-modal-bg:has(form) .pcb2-modal{ width:100vw; max-width:100vw; min-height:100%; border-radius:0; margin:0; padding-top:calc(env(safe-area-inset-top, 0px) + 16px); padding-bottom:40vh; /* klaviatura acilanda sahe gorunsun deye boshluq */ } /* tesekkur qutusu (form yox) — merkez, kicik qutu */ .pcb2-modal-bg.pcb2-modal-bg.pcb2-center .pcb2-modal{ width:92vw; min-height:0; border-radius:var(--r); margin:auto; padding-bottom:24px; } } /* ============================================================ MODAL FINAL (2026-07-19g) — v2/v3 qaydalarini EVEZ EDIR. 3 qat sinif (0,3,0) > :has(form) (0,2,1) -> hemise qalib gelir. - Form modali TEBII hundurluk (min-height:100% YOX) => klaviatura acilanda melumat xanasi SIXILMIR; altda 45vh bosluq. - Daxili modal scroll YOX -> bg scroll edir (iOS klaviatura ucun duzgun). - Tesekkur qutusu (pcb2-center): MERKEZDE. ============================================================ */ html.pcb2-lock{ overflow:hidden !important; } body.pcb2-lock{ overflow:hidden !important; } /* 2026-07-19j: position:fixed SILINDI — Safari-de fixed ovladlari pozurdu */ .pcb2-modal-bg.pcb2-modal-bg.pcb2-modal-bg{ position:fixed !important; inset:0 !important; height:auto !important; overflow-y:auto !important; } .pcb2-modal-bg.pcb2-modal-bg.pcb2-modal-bg.pcb2-center{ align-items:center !important; } @media (max-width:760px){ .pcb2-modal-bg.pcb2-modal-bg.pcb2-modal-bg{ align-items:flex-start !important; padding:calc(env(safe-area-inset-top, 0px) + 12px) 0 45vh !important; } .pcb2-modal-bg.pcb2-modal-bg.pcb2-modal-bg .pcb2-modal{ width:94vw !important; max-width:94vw !important; min-height:0 !important; max-height:none !important; overflow:visible !important; margin:0 auto !important; border-radius:16px !important; padding:20px !important; } .pcb2-modal-bg.pcb2-modal-bg.pcb2-modal-bg.pcb2-center{ align-items:center !important; padding:16px 0 !important; } } /* ============================================================ iOS SAFARI SƏRTLƏŞDİRMƏ (2026-07-19h) Simptom: mobildə fon bozarır (bg render olunur) amma ağ forma qutusu görünmür. Ən güclü şübhəli: `backdrop-filter` + position:fixed + overflow:auto birləşməsi — iOS Safari-də uşaq elementləri itir. Blur yalnız bəzəkdir → mobildə tamamilə söndürülür. ============================================================ */ @media (max-width:900px){ .pcb2-modal-bg.pcb2-modal-bg.pcb2-modal-bg{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:rgba(8,18,32,.62) !important; /* blur getdiyi ucun fon bir az tund */ -webkit-transform:none !important; transform:none !important; /* transform fixed-i sindirir */ filter:none !important; } /* modal qutusu her halda gorunen axinda qalsin */ .pcb2-modal-bg.pcb2-modal-bg.pcb2-modal-bg .pcb2-modal{ position:relative; z-index:1; opacity:1 !important; visibility:visible !important; } } /* 2026-07-19i: `-webkit-overflow-scrolling:touch` TAMAMILE SILINDI — iOS Safari-de bu xususiyyet konteyner daxilindeki elementleri bos render edir (Chrome iOS-da problem yox idi -> Safari-only simptomun sebebi). iOS13+ artiq momentum scroll-u default verir, ona gore itki yoxdur. */ /* ============================================================ 2026-07-19k — `position:fixed`-i SINDIRAN valideyn xüsusiyyətlərini modal açıq olanda neytrallaşdır. `transform`/`filter`/`perspective` valideyndə olanda fixed övlad VIEWPORT-a yox SƏNƏDƏ görə yerləşir (Woodmart mobil menyu body-yə transform qoyur) — Safari-də modal səhifənin ən yuxarısına yapışırdı. ============================================================ */ html.pcb2-lock, body.pcb2-lock{ transform:none !important; -webkit-transform:none !important; filter:none !important; -webkit-filter:none !important; perspective:none !important; will-change:auto !important; contain:none !important; } /* ============================================================ LANDŞAFT / QISA EKRAN (2026-07-19l) — telefonu yan çevirəndə Problem: eni 900-dən BÖYÜK olur (məs. 932×430) → mobil qaydalar işə düşmür, amma hündürlük cəmi ~430px → sifariş barı yoxa çıxır, sticky panel ekranın hamısını yeyir, dizayn sıxılır. Həll: qaydaları ENƏ görə yox, HÜNDÜRLÜYƏ görə tətbiq et. ============================================================ */ @media (max-height:600px){ /* 1) Sifariş barı HƏR ZAMAN əlçatan (en 900-dən böyük olsa belə) */ .pcb2.pcb2 .pcb2-mobilebar{ display:flex !important; } .pcb2.pcb2{ padding-bottom:72px; padding-left:10px; padding-right:10px; } /* 2) Panel sıxılmasın — sticky yerinə normal axın, tam görünsün */ .pcb2.pcb2 .pcb2-side{ position:static !important; max-height:none !important; } .pcb2.pcb2 .pcb2-summary{ max-height:none !important; } .pcb2.pcb2 .pcb2-slots{ max-height:none !important; overflow:visible !important; } /* 3) Şaquli yer qazan: keys şəkli və qrup alt-yazıları getsin */ .pcb2.pcb2 .pcb2-hero{ display:none !important; } .pcb2.pcb2 .pcb2-group span{ display:none; } .pcb2.pcb2 .pcb2-group{ padding:7px 12px; } .pcb2.pcb2 .pcb2-group b{ font-size:12.5px; } .pcb2.pcb2 .pcb2-sum-head{ padding:9px 13px; } .pcb2.pcb2 .pcb2-slot{ padding:5px 12px; } .pcb2.pcb2 .pcb2-total{ padding:11px 13px; } .pcb2.pcb2 .pcb2-tabs{ margin-bottom:8px; padding-bottom:6px; } .pcb2.pcb2 .pcb2-toolbar{ margin-bottom:8px; } /* 4) Modal qısa ekranda: yuxarıdan, altda klaviatura üçün yer */ .pcb2-modal-bg.pcb2-modal-bg.pcb2-modal-bg{ padding:8px 0 30vh !important; } .pcb2-modal-bg.pcb2-modal-bg.pcb2-modal-bg .pcb2-modal{ padding:16px; } .pcb2-modal-bg.pcb2-modal-bg.pcb2-modal-bg .pcb2-rs-img{ max-height:110px; } } /* Landşaft telefon (eni 900-1100, hündürlüyü qısa): 2 sütun saxla, məhsul qridini 3 sütun et ki, kartlar oxunaqlı qalsın */ @media (min-width:901px) and (max-width:1100px) and (max-height:600px){ .pcb2.pcb2 .pcb2-wrap.pcb2-wrap{ grid-template-columns:270px 1fr; gap:12px; } .pcb2.pcb2 .pcb2-grid{ grid-template-columns:repeat(3,1fr) !important; } } /* ═══════════════════════════════════════════════════════════════════ PC BUILDER RESPONSİV DÜZƏLİŞLƏR — 2026-07-21 (agent auditi) Bütün diskret grid breakpoint-ləri, fiks bar örtməsi, WhatsApp toqquşması, landşaft sıxlaşdırması, quick-view placeholder. Hamısı təmiz CSS. ═══════════════════════════════════════════════════════════════════ */ /* 1. MONOTON GRID — diskret repeat()-ləri auto-fill ilə əvəz et (761-900=4 → 901-1100=3 → >1100=5 zigzaqını bitirir; ultra-geniş seyrəkliyini həll edir) */ .pcb2.pcb2 .pcb2-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)) !important; gap: 8px !important; } @media (max-width: 520px) { .pcb2.pcb2 .pcb2-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* 2. Fiks alt bar altında son sıra CTA-ları gizlənməsin */ @media (max-width: 900px) { .pcb2.pcb2 .pcb2-main { padding-bottom: 84px !important; } } /* 3. WhatsApp float builder səhifəsində alt-barın ÜSTÜNƏ (yalnız ≤900px) */ @media (max-width: 900px) { body.page-id-43675 .qlwapp__container { bottom: 96px !important; } body.page-id-43675 a.scrollToTop { bottom: 150px !important; } } /* 4. Landşaft (alçaq hündürlük): üst blok sıxlaşsın, məhsul fold-a girsin */ @media (max-height: 600px) { .pcb2.pcb2 .pcb2-tab { padding: 5px 10px !important; font-size: 11.5px !important; } .pcb2.pcb2 .pcb2-tabs { margin-bottom: 6px !important; padding-bottom: 3px !important; } .pcb2.pcb2 .pcb2-groups { margin-bottom: 6px !important; } .pcb2.pcb2 .pcb2-groups > * { padding: 7px 11px !important; } .pcb2.pcb2 .pcb2-toolbar { margin-bottom: 6px !important; } } /* 5. Landşaftda >900px dublikat mobil bar gizlət (yan panel onsuz da var) */ @media (max-height: 600px) and (min-width: 901px) { .pcb2.pcb2 .pcb2-mobilebar { display: none !important; } } /* 6. Quick-view: şəkilsizdə sınıq-şəkil yerinə placeholder; şəkil sahəsi CTA-ları itələməsin */ .pcb2.pcb2 .pcb2-qv-img { max-height: 340px !important; min-height: 0 !important; } @media (max-width: 760px) { .pcb2.pcb2 .pcb2-qv-img { max-height: 240px !important; } } .pcb2.pcb2 .pcb2-qv-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 200px; color: var(--text-3); background: var(--bg); border-radius: 10px; } .pcb2.pcb2 .pcb2-qv-noimg svg { width: 44px; height: 44px; } /* 7. Placeholder .noimg (Task 2 SVG) — təmiz ölçü/rəng */ .pcb2.pcb2 .pcb2-card .noimg { color: var(--text-3); } .pcb2.pcb2 .pcb2-card .noimg svg { width: 34px; height: 34px; } /* 8. Kateqoriya tab sırasına sağ-kənar fade (scroll affordansı) */ .pcb2.pcb2 .pcb2-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); } /* 9. Məhsul adı 3 sətrə (dar sütunda model şəkilçisi kəsilməsin) */ .pcb2.pcb2 .pcb2-name { -webkit-line-clamp: 3 !important; min-height: 0 !important; } /* 10. Toolbar məhsul sayğacı sağa dayansın, kəsilməsin */ @media (max-width: 760px) { .pcb2.pcb2 .pcb2-toolbar .pcb2-count { margin-left: auto; flex-shrink: 0; white-space: nowrap; } } /* 11. ŞƏKİL POZULMASI (zoom-da kəsilir) — object-fit:cover baqını düzəlt. Köhnə qayda `.pcb2.pcb2 .pcb2-card img{object-fit:cover}` məhsul şəklini KƏSİRDİ; məhsul şəkli TAM görünməlidir → contain. (kart, quick-view, hazır sistem) */ .pcb2.pcb2 .pcb2-card img, .pcb2.pcb2 .pcb2-qv-img img, .pcb2.pcb2 #pcb2-qv-main, .pcb2.pcb2 .pcb2-rs-img { object-fit: contain !important; } /* ═══ KOMPONENT ALT-FİLTR ÇİPLƏRİ (2026-07-21) ═══ */ .pcb2.pcb2 .pcb2-subfilters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .pcb2.pcb2 .pcb2-subfilters:empty { display: none; } .pcb2.pcb2 .pcb2-fchip { border: 1px solid var(--border-2); background: var(--surface); border-radius: 20px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; transition: all .13s ease; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; } .pcb2.pcb2 .pcb2-fchip i { font-style: normal; font-size: 11px; color: var(--text-3); font-weight: 600; } .pcb2.pcb2 .pcb2-fchip:hover { border-color: var(--blue); color: var(--blue); } .pcb2.pcb2 .pcb2-fchip.on { background: var(--blue); border-color: var(--blue); color: #fff; } .pcb2.pcb2 .pcb2-fchip.on i { color: #d7e9fb; } @media (max-width: 520px) { .pcb2.pcb2 .pcb2-subfilters { gap: 5px; margin-bottom: 10px; } .pcb2.pcb2 .pcb2-fchip { padding: 5px 11px; font-size: 12px; } } /* ═══════════════════════════════════════════════════════════ TÖVSİYƏ ROZETLƏRİ + GÜC BANNERI (2026-07-24) ═══════════════════════════════════════════════════════════ */ .pcb2.pcb2 .pcb2-card .imglink { position: relative; } .pcb2.pcb2 .pcb2-badges { position: absolute; top: 6px; left: 6px; z-index: 2; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; pointer-events: none; } .pcb2.pcb2 .pcb2-badge { font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .01em; padding: 4px 7px; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 3px rgba(16,24,40,.12); } .pcb2.pcb2 .pcb2-badge.rec { background:#fff4d6; color:#8a5a00; border:1px solid #f2d489; } .pcb2.pcb2 .pcb2-badge.watt { background:#e3f6ec; color:#0a6b42; border:1px solid #a9e0c4; } .pcb2.pcb2 .pcb2-recnote { margin: 0 0 12px; padding: 9px 13px; border-radius: 10px; font-size: 13px; background: #eef4ff; color: #1b3f8f; border: 1px solid #cfe0ff; } @media (max-width: 520px) { .pcb2.pcb2 .pcb2-badge { font-size: 9.5px; padding: 3px 6px; } .pcb2.pcb2 .pcb2-recnote { font-size: 12px; padding: 8px 10px; } } /* ═══ MONİTOR FİLTRLƏRİ — KOMPAKT DROPDOWN SƏTRİ (2026-07-25) ═══ */ .pcb2.pcb2 .pcb2-subfilters.pcb2-mfrow { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; } .pcb2.pcb2 .pcb2-mfsel { border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 8px 7px; font-size: 12.5px; font-weight: 700; font-family: inherit; background: var(--surface); color: var(--text-2); cursor: pointer; width: 115px; min-width: 0; max-width: 115px; } .pcb2.pcb2 .pcb2-mfsel:hover { border-color: var(--blue); } .pcb2.pcb2 .pcb2-mfsel.on { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); font-weight: 800; } @media (max-width: 560px) { .pcb2.pcb2 .pcb2-subfilters.pcb2-mfrow { gap: 6px; } .pcb2.pcb2 .pcb2-mfsel { flex: 1 1 47%; max-width: none; font-size: 12px; padding: 7px 8px; } } /* Monitor dropdown-ları axtarış/sıralama ilə EYNİ sətirdə (İlkin: iki sətri birləşdir). Çox-qruplu dropdown → toolbar-ın öz flex uşaqları olur; çip-sətirləri isə öz sətrində qalır. */ .pcb2.pcb2 .pcb2-toolbar .pcb2-subfilters { margin: 0; } .pcb2.pcb2 .pcb2-toolbar .pcb2-search { flex: 1 1 140px; min-width: 120px; } .pcb2.pcb2 .pcb2-toolbar .pcb2-subfilters.pcb2-mfrow { display: contents; } .pcb2.pcb2 .pcb2-toolbar .pcb2-subfilters:not(.pcb2-mfrow):not(:empty) { flex: 1 1 100%; order: 99; } @media (max-width: 560px) { .pcb2.pcb2 .pcb2-toolbar .pcb2-subfilters.pcb2-mfrow { display: flex; flex: 1 1 100%; order: 99; flex-wrap: wrap; } }