/* SpOki unified product pagination — one component, every listing surface. Wrapper class .spoki-pagination gives these rules higher specificity than the legacy .spoki-abc__* rules in spoki-category.css, so the orange active state and spacing win wherever both files load. Fully self-contained so it also styles native shop / tag / attribute / search surfaces where spoki-category.css is not enqueued. Brand: Teal #19B0B6 · Action Orange #FF8A00 · Deep Trust Blue #2E3A67 · Charcoal #2A2D34 · Soft Cream #FFF7EB. */ .spoki-pagination.spoki-archive-bottom-controls{ display:flex; flex-direction:column; align-items:center; gap:0; margin:32px 0 28px; /* desktop: 28–40 above / 24–40 below */ font-family:'Nunito',sans-serif; } /* ===== Desktop / tablet (>=768px): compact numbered pagination ===== */ .spoki-pagination .spoki-archive-bottom-controls__pagination{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; /* 6–8px between controls */ } .spoki-pagination .spoki-abc__page, .spoki-pagination .spoki-abc__nav{ display:inline-flex; align-items:center; justify-content:center; min-width:41px; width:41px; height:41px; /* ~40–42px, clickable >=40x40 */ padding:0; box-sizing:border-box; border-radius:50%; border:1px solid #DCD5CC; /* soft neutral grey */ background:#fff; color:#2A2D34; /* Charcoal on inactive */ font-weight:800; font-size:.95rem; line-height:1; text-decoration:none; transition:background .15s ease,border-color .15s ease,color .15s ease; } .spoki-pagination .spoki-abc__nav{ color:#2E3A67; /* Deep Trust Blue arrows */ font-size:1.25rem; } .spoki-pagination .spoki-abc__page:hover, .spoki-pagination .spoki-abc__nav:hover{ border-color:#19B0B6; color:#00838A; background:#fff; } .spoki-pagination .spoki-abc__page:focus-visible, .spoki-pagination .spoki-abc__nav:focus-visible, .spoki-pagination .spoki-abc__mnav:focus-visible{ outline:3px solid #19B0B6; outline-offset:2px; } .spoki-pagination .spoki-abc__page.is-current{ background:#FF8A00; /* Action Orange active */ border-color:#FF8A00; color:#fff; cursor:default; } .spoki-pagination .spoki-abc__page.is-current:hover{ background:#FF8A00; border-color:#FF8A00; color:#fff; } .spoki-pagination .spoki-abc__dots{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:41px; color:#2A2D34; font-weight:800; } /* Mobile-only pieces hidden on desktop */ .spoki-pagination .spoki-abc__mobilenav, .spoki-pagination .spoki-abc__progress{ display:none; } /* ===== Mobile (<768px): action-oriented layout ===== */ @media (max-width:767px){ .spoki-pagination.spoki-archive-bottom-controls{ align-items:center; margin:28px 14px; /* 12-16px side padding, no overflow */ gap:0; } /* Desktop numbered set hidden; mobile shows its own compact numbered set */ .spoki-pagination .spoki-archive-bottom-controls__pagination{ display:none; } /* Compact numbered pagination on one centred row (same language as desktop) */ .spoki-pagination .spoki-abc__mobilenav{ display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:5px; /* 4-6px */ width:100%; margin:0 0 12px; } .spoki-pagination .spoki-abc__mobilenav .spoki-abc__page, .spoki-pagination .spoki-abc__mobilenav .spoki-abc__nav{ min-width:40px; width:40px; height:40px; /* 38-40px visual, min-height 40px */ padding:0; font-size:.9rem; flex:0 0 auto; } .spoki-pagination .spoki-abc__mobilenav .spoki-abc__nav{ font-size:1.15rem; } .spoki-pagination .spoki-abc__mobilenav .spoki-abc__dots{ min-width:14px; height:40px; font-size:.9rem; } /* Two-line status, lighter than the pagination */ .spoki-pagination .spoki-abc__progress{ display:flex; flex-direction:column; align-items:center; gap:6px; /* <=8px */ width:100%; text-align:center; color:#2A2D34; margin:0; } .spoki-pagination .spoki-abc__shown{ font-weight:500; font-size:14px; } .spoki-pagination .spoki-abc__pagecount{ font-weight:400; font-size:13px; color:#54656B; } } /* ===== Per-page ("Покажи") control — rendered above the grid ===== */ .spoki-perpage.spoki-archive-bottom-controls__per-page{ display:flex; align-items:center; } .spoki-perpage .spoki-perpage__wrap{ display:inline-flex; align-items:center; gap:8px; margin:0; } .spoki-perpage .spoki-archive-bottom-controls__label{ font-family:'Nunito',sans-serif; color:#2A2D34; font-size:.9rem; font-weight:700; white-space:nowrap; } .spoki-perpage .spoki-archive-bottom-controls__select{ border-radius:999px; border:1px solid #DCD5CC; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319B0B6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; background-size:13px; color:#2A2D34; font-family:'Nunito',sans-serif; font-size:.9rem; padding:8px 34px 8px 14px; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none; } .spoki-perpage .spoki-archive-bottom-controls__select:focus-visible{ outline:3px solid #19B0B6; outline-offset:2px; border-color:#19B0B6; } \n /* ===== Per-page control ("Покажи … на страница") — responsive ===== */ /* Desktop/tablet (>=768px): keep the full label on one row. */ @media (min-width:768px){ .spoki-archive-bottom-controls .spoki-archive-bottom-controls__per-page{ display:inline-flex; align-items:center; justify-content:center; flex-wrap:nowrap; white-space:nowrap; gap:8px; } .spoki-archive-bottom-controls .spoki-archive-bottom-controls__per-page > *{ flex-shrink:0; white-space:nowrap; } } /* Mobile (<768px): compact "Покажи [24]" — contained, centred, no overflow/clipping. */ @media (max-width:767px){ .spoki-archive-bottom-controls .spoki-archive-bottom-controls__per-page{ display:inline-flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:8px; max-width:100%; margin-inline:auto; padding-inline:16px; box-sizing:border-box; } .spoki-archive-bottom-controls .spoki-archive-bottom-controls__per-page > .spoki-archive-bottom-controls__label{ flex:0 0 auto; white-space:nowrap; } /* Hide the redundant trailing "на страница"; the