Divi Pagination Pro \u2014 Live Demo<\/title><style>\/**\n * Divi Pagination Pro \u2013 pagination styles.\n * Everything is driven by CSS variables (--dpp-*) generated by the plugin from settings.\n * The values here act as a fallback when the variables are missing.\n *\/\n\n.dpp-pagination {\n\t--dpp-text: #1f2430;\n\t--dpp-bg: #f1f2f6;\n\t--dpp-hover-bg: #e6e7ee;\n\t--dpp-hover-text: #1f2430;\n\t--dpp-active-text: #ffffff;\n\t--dpp-active-bg: linear-gradient(135deg, #7c3aed, #db2777);\n\t--dpp-accent: linear-gradient(135deg, #7c3aed, #db2777);\n\t--dpp-radius: 12px;\n\t--dpp-size: 42px;\n\t--dpp-gap: 8px;\n\t--dpp-font-size: 15px;\n\t--dpp-font-weight: 600;\n\t--dpp-border: none;\n\t--dpp-border-color: #e2e4ee;\n\t--dpp-active-border-color: #7c3aed;\n\t--dpp-shadow: 0 4px 14px -2px rgba(124, 58, 237, 0.18);\n\n\tdisplay: flex;\n\talign-items: center;\n\tflex-wrap: wrap;\n\tgap: var(--dpp-gap);\n\tfont-size: var(--dpp-font-size);\n\tfont-weight: var(--dpp-font-weight);\n\tline-height: 1;\n\t-webkit-font-smoothing: antialiased;\n}\n\n\/* Shared elements *\/\n.dpp-pagination .dpp-item,\n.dpp-pagination .dpp-arrow {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-width: var(--dpp-size);\n\theight: var(--dpp-size);\n\tpadding: 0 0.6em;\n\tbox-sizing: border-box;\n\tborder-radius: var(--dpp-radius);\n\tbackground: var(--dpp-bg);\n\tcolor: var(--dpp-text);\n\tborder: var(--dpp-border);\n\ttext-decoration: none;\n\tcursor: pointer;\n\ttransition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;\n}\n\n.dpp-pagination .dpp-item:hover,\n.dpp-pagination .dpp-arrow:hover {\n\tbackground: var(--dpp-hover-bg);\n\tcolor: var(--dpp-hover-text);\n}\n\n.dpp-pagination .dpp-item.is-active {\n\tbackground: var(--dpp-active-bg);\n\tcolor: var(--dpp-active-text);\n\tbox-shadow: var(--dpp-shadow);\n}\n\n.dpp-pagination .dpp-arrow.is-disabled {\n\topacity: 0.4;\n\tpointer-events: none;\n}\n\n.dpp-pagination .dpp-ellipsis {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-width: calc(var(--dpp-size) * 0.6);\n\theight: var(--dpp-size);\n\tcolor: var(--dpp-text);\n\topacity: 0.55;\n}\n\n\/* ============ CLASSIC ============ *\/\n.dpp-style--classic .dpp-item.is-active {\n\ttransform: translateY(-1px);\n}\n\n\/* ============ PILLS ============ *\/\n.dpp-style--pills .dpp-item,\n.dpp-style--pills .dpp-arrow {\n\tborder-radius: 999px;\n\twidth: var(--dpp-size);\n\tmin-width: var(--dpp-size);\n\tpadding: 0;\n}\n.dpp-style--pills .dpp-item.is-active {\n\ttransform: none;\n}\n\n\/* ============ BORDERED ============ *\/\n.dpp-style--bordered .dpp-item,\n.dpp-style--bordered .dpp-arrow {\n\tbackground: transparent;\n\tborder: 2px solid var(--dpp-border-color);\n}\n.dpp-style--bordered .dpp-item:hover,\n.dpp-style--bordered .dpp-arrow:hover {\n\tborder-color: var(--dpp-active-border-color);\n\tbackground: transparent;\n}\n.dpp-style--bordered .dpp-item.is-active {\n\tbackground: transparent;\n\tcolor: var(--dpp-text);\n\tborder-color: var(--dpp-active-border-color);\n\tbox-shadow: inset 0 0 0 1px var(--dpp-active-border-color);\n}\n\n\/* ============ DOTS ============ *\/\n.dpp-style--dots {\n\tgap: calc(var(--dpp-gap) * 1.4);\n}\n.dpp-style--dots .dpp-dots-track {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: calc(var(--dpp-gap) * 0.8);\n}\n.dpp-style--dots .dpp-dot {\n\tdisplay: block;\n\twidth: calc(var(--dpp-size) * 0.26);\n\theight: calc(var(--dpp-size) * 0.26);\n\tborder-radius: 999px;\n\tbackground: var(--dpp-bg);\n\ttransition: width 0.25s ease, background 0.25s ease;\n}\n.dpp-style--dots .dpp-dot:hover {\n\tbackground: var(--dpp-hover-bg);\n}\n.dpp-style--dots .dpp-dot.is-active {\n\twidth: calc(var(--dpp-size) * 0.95);\n\tbackground: var(--dpp-accent);\n\tbox-shadow: var(--dpp-shadow);\n}\n.dpp-style--dots .dpp-arrow {\n\tbackground: transparent;\n\tmin-width: auto;\n\twidth: var(--dpp-size);\n\tpadding: 0;\n\tcolor: var(--dpp-text);\n\topacity: 0.7;\n}\n.dpp-style--dots .dpp-arrow:hover {\n\tbackground: var(--dpp-hover-bg);\n\topacity: 1;\n}\n\n\/* ============ TRACK ============ *\/\n.dpp-style--track {\n\talign-items: center;\n}\n.dpp-style--track .dpp-track-wrap {\n\tflex: 1 1 auto;\n\tmin-width: 180px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n\tpadding: 0 6px;\n}\n.dpp-style--track .dpp-track-labels {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n.dpp-style--track .dpp-track-num {\n\tcolor: var(--dpp-text);\n\ttext-decoration: none;\n\topacity: 0.65;\n\tfont-weight: var(--dpp-font-weight);\n\tpadding: 0 4px;\n}\n.dpp-style--track .dpp-track-num.is-active {\n\topacity: 1;\n\tcolor: var(--dpp-text);\n}\n.dpp-style--track .dpp-track-rail {\n\tposition: relative;\n\theight: 6px;\n\tborder-radius: 999px;\n\tbackground: var(--dpp-bg);\n}\n.dpp-style--track .dpp-track-fill {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\theight: 100%;\n\tborder-radius: 999px;\n\tbackground: var(--dpp-accent);\n\ttransition: width 0.3s ease;\n}\n.dpp-style--track .dpp-track-handle {\n\tposition: absolute;\n\ttop: 50%;\n\twidth: 18px;\n\theight: 18px;\n\tborder-radius: 999px;\n\tbackground: var(--dpp-accent);\n\tbox-shadow: var(--dpp-shadow), 0 0 0 4px #fff;\n\ttransform: translate(-50%, -50%);\n\ttransition: left 0.3s ease;\n}\n.dpp-style--track .dpp-arrow {\n\tbackground: transparent;\n\tcolor: var(--dpp-text);\n\topacity: 0.7;\n}\n.dpp-style--track .dpp-arrow:hover {\n\topacity: 1;\n\tbackground: var(--dpp-hover-bg);\n}\n\n\/* ============ COMPACT ============ *\/\n.dpp-style--compact .dpp-arrow {\n\tborder-radius: 999px;\n\twidth: var(--dpp-size);\n\tmin-width: var(--dpp-size);\n\tpadding: 0;\n}\n.dpp-style--compact .dpp-compact-count {\n\tcolor: var(--dpp-text);\n\tpadding: 0 0.4em;\n\tfont-variant-numeric: tabular-nums;\n}\n.dpp-style--compact .dpp-compact-count strong {\n\tfont-weight: 800;\n}\n\n\/* ============ PROGRESS ============ *\/\n.dpp-style--progress {\n\talign-items: center;\n}\n.dpp-style--progress .dpp-progress-rail {\n\tposition: relative;\n\tflex: 1 1 auto;\n\tmin-width: 140px;\n\theight: 8px;\n\tborder-radius: 999px;\n\tbackground: var(--dpp-bg);\n\toverflow: hidden;\n}\n.dpp-style--progress .dpp-progress-fill {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\theight: 100%;\n\tborder-radius: 999px;\n\tbackground: var(--dpp-accent);\n\ttransition: width 0.3s ease;\n}\n.dpp-style--progress .dpp-progress-count {\n\tcolor: var(--dpp-text);\n\twhite-space: nowrap;\n\tfont-variant-numeric: tabular-nums;\n}\n.dpp-style--progress .dpp-progress-count strong {\n\tfont-weight: 800;\n}\n.dpp-style--progress .dpp-arrow {\n\tbackground: transparent;\n\tcolor: var(--dpp-text);\n\topacity: 0.7;\n}\n.dpp-style--progress .dpp-arrow:hover {\n\topacity: 1;\n\tbackground: var(--dpp-hover-bg);\n}\n\n\/* ============ STEPS ============ *\/\n.dpp-style--steps {\n\tgap: 0;\n}\n.dpp-style--steps .dpp-step {\n\tdisplay: inline-flex;\n\ttext-decoration: none;\n}\n.dpp-style--steps .dpp-step-node {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: calc(var(--dpp-size) * 0.8);\n\theight: calc(var(--dpp-size) * 0.8);\n\tborder-radius: 999px;\n\tbackground: var(--dpp-bg);\n\tcolor: var(--dpp-text);\n\tfont-weight: var(--dpp-font-weight);\n\tborder: 2px solid transparent;\n\ttransition: all 0.2s ease;\n}\n.dpp-style--steps .dpp-step.is-done .dpp-step-node,\n.dpp-style--steps .dpp-step.is-active .dpp-step-node {\n\tbackground: var(--dpp-accent);\n\tcolor: var(--dpp-active-text);\n}\n.dpp-style--steps .dpp-step.is-active .dpp-step-node {\n\tbox-shadow: var(--dpp-shadow), 0 0 0 4px rgba(124, 58, 237, 0.12);\n}\n.dpp-style--steps .dpp-step.is-future .dpp-step-node {\n\tbackground: transparent;\n\tborder: 2px dashed var(--dpp-border-color);\n\tcolor: var(--dpp-text);\n\topacity: 0.6;\n}\n.dpp-style--steps .dpp-step-line {\n\tflex: 0 0 auto;\n\twidth: calc(var(--dpp-gap) * 2.4 + 8px);\n\theight: 2px;\n\tbackground: var(--dpp-border-color);\n\talign-self: center;\n}\n.dpp-style--steps .dpp-step-line.is-done {\n\tbackground: var(--dpp-accent);\n}\n\n\/* Minor alignment when injected into an existing container. *\/\n.dpp-host {\n\tdisplay: block;\n}\n.dpp-host > .dpp-pagination {\n\tmargin: 0;\n}\n\n\/* ---- demo page ---- *\/\n*{box-sizing:border-box}\nbody{margin:0;font-family:Inter,-apple-system,\"Segoe UI\",Roboto,sans-serif;color:#1f2430;background:#f4f5fa}\n.demo{max-width:1080px;margin:0 auto;padding:32px 20px 56px}\n.demo-head{text-align:center;margin-bottom:24px}\n.badge{display:inline-block;font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:#7c3aed;background:#f3e8ff;padding:5px 12px;border-radius:999px}\n.demo-head h1{font-size:38px;font-weight:800;letter-spacing:-.02em;margin:12px 0 6px}\n.demo-head h1 span{background:linear-gradient(135deg,#7c3aed,#db2777);-webkit-background-clip:text;background-clip:text;color:transparent}\n.demo-head p{color:#5a6072;margin:0;font-size:15px}\n\n.controls{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:center;background:#fff;border:1px solid #e7e8ef;border-radius:14px;padding:16px 20px;margin-bottom:28px}\n.ctrl{display:flex;align-items:center;gap:10px}\n.ctrl-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#8b8fa0}\n.seg{display:flex;flex-wrap:wrap;gap:6px}\n.seg button{border:1px solid #e2e4ee;background:#fff;color:#3c434a;font-size:13px;font-weight:600;padding:7px 12px;border-radius:8px;cursor:pointer;transition:.15s}\n.seg button:hover{border-color:#c4b5fd}\n.seg button.active{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff;border-color:transparent}\n.swatches{display:flex;gap:8px}\n.swatches button{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #e2e4ee;cursor:pointer;padding:0}\n.swatches button.active{box-shadow:0 0 0 2px #1f2430}\n.ctrl.chk{font-size:13px;font-weight:600;color:#3c434a;cursor:pointer}\ninput[type=range]{accent-color:#7c3aed}\n\n.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}\n@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}\n@media(max-width:560px){.grid{grid-template-columns:1fr}}\n.post{background:#fff;border:1px solid #e7e8ef;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.18s;box-shadow:0 1px 2px rgba(16,24,40,.04)}\n.post:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(16,24,40,.3)}\n.thumb{height:130px}\n.post-body{padding:16px 18px 18px}\n.post-cat{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7c3aed}\n.post h3{font-size:16px;margin:7px 0 8px;line-height:1.3}\n.post p{font-size:13.5px;color:#5a6072;line-height:1.55;margin:0 0 12px}\n.more{font-size:13px;font-weight:700;color:#db2777;text-decoration:none}\n.pager{display:flex;justify-content:center;margin-top:34px}\n.demo-foot{text-align:center;margin-top:36px;color:#8b8fa0;font-size:12px}\n.demo-foot a{color:#5a6072;font-weight:600;text-decoration:none}\n<\/style><\/head><body>\n<div class=\"demo\">\n <header class=\"demo-head\">\n <div class=\"badge\">Live Demo<\/div>\n <h1>Divi <span>Pagination<\/span> Pro<\/h1>\n <p>Switch styles, recolor, and click the pagination \u2014 it really works on this sample blog.<\/p>\n <\/header>\n <div class=\"controls\">\n <div class=\"ctrl\"><span class=\"ctrl-label\">Style<\/span><div id=\"styleBtns\" class=\"seg\"><\/div><\/div>\n <div class=\"ctrl\"><span class=\"ctrl-label\">Theme<\/span><div id=\"themeBtns\" class=\"swatches\"><\/div><\/div>\n <div class=\"ctrl\"><span class=\"ctrl-label\">Roundness<\/span><input id=\"radius\" type=\"range\" min=\"0\" max=\"50\" value=\"12\"><\/div>\n <label class=\"ctrl chk\"><input id=\"arrows\" type=\"checkbox\" checked> Arrows<\/label>\n <\/div>\n <main>\n <div id=\"grid\" class=\"grid\"><\/div>\n <nav id=\"pager\" class=\"pager\"><\/nav>\n <\/main>\n <footer class=\"demo-foot\">Made by <a href=\"https:\/\/akoenterprise.cz\/pluginsbysajmn\/\" target=\"_blank\" rel=\"noopener\">sajmn<\/a><\/footer>\n<\/div>\n<script>\n\/**\n * Divi Pagination Pro \u2013 shared renderer.\n * Builds the HTML markup for all 8 styles. No dependencies (vanilla JS).\n * Used by both the admin preview and the frontend.\n *\n * Model: { current:Number, total:Number, urlFor:Function(num)->href }\n * Opts: { style, showPrevNext, prevLabel, nextLabel }\n *\/\n(function (window) {\n\t'use strict';\n\n\tfunction esc(str) {\n\t\treturn String(str)\n\t\t\t.replace(\/&\/g, '&')\n\t\t\t.replace(\/<\/g, '<')\n\t\t\t.replace(\/>\/g, '>')\n\t\t\t.replace(\/\"\/g, '"');\n\t}\n\n\tfunction clamp(n, min, max) {\n\t\treturn Math.max(min, Math.min(max, n));\n\t}\n\n\t\/**\n\t * Build the list of pages with optional ellipses (\"\u2026\").\n\t * boundary = how many edge pages to always show; sibling = how many around the current page.\n\t *\/\n\tfunction pageList(current, total, sibling, boundary) {\n\t\tif (total <= 0) {\n\t\t\treturn [1];\n\t\t}\n\t\tvar pages = [];\n\t\tvar start = Math.max(boundary + 1, current - sibling);\n\t\tvar end = Math.min(total - boundary, current + sibling);\n\n\t\tfor (var i = 1; i <= Math.min(boundary, total); i++) {\n\t\t\tpages.push(i);\n\t\t}\n\t\tif (start > boundary + 2) {\n\t\t\tpages.push('ellipsis');\n\t\t} else {\n\t\t\tfor (var j = boundary + 1; j < start; j++) {\n\t\t\t\tpages.push(j);\n\t\t\t}\n\t\t}\n\t\tfor (var k = start; k <= end; k++) {\n\t\t\tif (k >= 1 && k <= total) {\n\t\t\t\tpages.push(k);\n\t\t\t}\n\t\t}\n\t\tif (end < total - boundary - 1) {\n\t\t\tpages.push('ellipsis');\n\t\t} else {\n\t\t\tfor (var l = end + 1; l <= total - boundary; l++) {\n\t\t\t\tpages.push(l);\n\t\t\t}\n\t\t}\n\t\tfor (var m = Math.max(total - boundary + 1, boundary + 1); m <= total; m++) {\n\t\t\tif (pages.indexOf(m) === -1) {\n\t\t\t\tpages.push(m);\n\t\t\t}\n\t\t}\n\t\t\/\/ Remove duplicates while preserving order.\n\t\tvar seen = {};\n\t\treturn pages.filter(function (p) {\n\t\t\tif (p === 'ellipsis') {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif (seen[p]) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\tseen[p] = true;\n\t\t\treturn true;\n\t\t});\n\t}\n\n\tfunction arrow(dir, opts, model) {\n\t\tif (!opts.showPrevNext) {\n\t\t\treturn '';\n\t\t}\n\t\tvar label = dir === 'prev' ? opts.prevLabel : opts.nextLabel;\n\t\tvar disabled = dir === 'prev' ? model.current <= 1 : model.current >= model.total;\n\t\tvar target = dir === 'prev' ? model.current - 1 : model.current + 1;\n\t\tvar href = disabled ? '#' : model.urlFor(target);\n\t\tvar cls = 'dpp-arrow dpp-arrow--' + dir + (disabled ? ' is-disabled' : '');\n\t\treturn '<a class=\"' + cls + '\" href=\"' + esc(href) + '\"' + (disabled ? ' aria-disabled=\"true\" tabindex=\"-1\"' : '') + '>' + label + '<\/a>';\n\t}\n\n\t\/* ---------- Individual styles ---------- *\/\n\n\tfunction numbered(model, opts, variantClass, sibling, boundary) {\n\t\tvar list = pageList(model.current, model.total, sibling, boundary);\n\t\tvar inner = list.map(function (p) {\n\t\t\tif (p === 'ellipsis') {\n\t\t\t\treturn '<span class=\"dpp-ellipsis\">\u2026<\/span>';\n\t\t\t}\n\t\t\tvar active = p === model.current;\n\t\t\treturn '<a class=\"dpp-item' + (active ? ' is-active' : '') + '\" href=\"' + esc(model.urlFor(p)) + '\"' + (active ? ' aria-current=\"page\"' : '') + '>' + p + '<\/a>';\n\t\t}).join('');\n\t\treturn '<div class=\"dpp-pagination dpp-style--' + variantClass + '\">' +\n\t\t\tarrow('prev', opts, model) + inner + arrow('next', opts, model) +\n\t\t\t'<\/div>';\n\t}\n\n\tfunction dots(model, opts) {\n\t\tvar inner = '';\n\t\tfor (var i = 1; i <= model.total; i++) {\n\t\t\tvar active = i === model.current;\n\t\t\tinner += '<a class=\"dpp-dot' + (active ? ' is-active' : '') + '\" href=\"' + esc(model.urlFor(i)) + '\" aria-label=\"' + i + '\"><\/a>';\n\t\t}\n\t\treturn '<div class=\"dpp-pagination dpp-style--dots\">' +\n\t\t\tarrow('prev', opts, model) +\n\t\t\t'<div class=\"dpp-dots-track\">' + inner + '<\/div>' +\n\t\t\tarrow('next', opts, model) +\n\t\t\t'<\/div>';\n\t}\n\n\tfunction track(model, opts) {\n\t\tvar pct = model.total > 1 ? ((model.current - 1) \/ (model.total - 1)) * 100 : 0;\n\t\tvar list = pageList(model.current, model.total, 2, 1);\n\t\tvar labels = list.map(function (p) {\n\t\t\tif (p === 'ellipsis') {\n\t\t\t\treturn '<span class=\"dpp-ellipsis\">\u2026<\/span>';\n\t\t\t}\n\t\t\tvar active = p === model.current;\n\t\t\treturn '<a class=\"dpp-track-num' + (active ? ' is-active' : '') + '\" href=\"' + esc(model.urlFor(p)) + '\">' + p + '<\/a>';\n\t\t}).join('');\n\t\treturn '<div class=\"dpp-pagination dpp-style--track\">' +\n\t\t\tarrow('prev', opts, model) +\n\t\t\t'<div class=\"dpp-track-wrap\">' +\n\t\t\t\t'<div class=\"dpp-track-labels\">' + labels + '<\/div>' +\n\t\t\t\t'<div class=\"dpp-track-rail\">' +\n\t\t\t\t\t'<span class=\"dpp-track-fill\" style=\"width:' + clamp(pct, 0, 100) + '%\"><\/span>' +\n\t\t\t\t\t'<span class=\"dpp-track-handle\" style=\"left:' + clamp(pct, 0, 100) + '%\"><\/span>' +\n\t\t\t\t'<\/div>' +\n\t\t\t'<\/div>' +\n\t\t\tarrow('next', opts, model) +\n\t\t\t'<\/div>';\n\t}\n\n\tfunction compact(model, opts) {\n\t\treturn '<div class=\"dpp-pagination dpp-style--compact\">' +\n\t\t\tarrow('prev', opts, model) +\n\t\t\t'<span class=\"dpp-compact-count\"><strong>' + model.current + '<\/strong> \/ ' + model.total + '<\/span>' +\n\t\t\tarrow('next', opts, model) +\n\t\t\t'<\/div>';\n\t}\n\n\tfunction progress(model, opts) {\n\t\tvar pct = model.total > 0 ? (model.current \/ model.total) * 100 : 0;\n\t\treturn '<div class=\"dpp-pagination dpp-style--progress\">' +\n\t\t\tarrow('prev', opts, model) +\n\t\t\t'<div class=\"dpp-progress-rail\"><span class=\"dpp-progress-fill\" style=\"width:' + clamp(pct, 0, 100) + '%\"><\/span><\/div>' +\n\t\t\t'<span class=\"dpp-progress-count\"><strong>' + model.current + '<\/strong> \/ ' + model.total + '<\/span>' +\n\t\t\tarrow('next', opts, model) +\n\t\t\t'<\/div>';\n\t}\n\n\tfunction steps(model, opts) {\n\t\t\/\/ Window of steps around the current one, max 7.\n\t\tvar maxSteps = 7;\n\t\tvar startN = 1;\n\t\tvar endN = model.total;\n\t\tif (model.total > maxSteps) {\n\t\t\tstartN = clamp(model.current - 3, 1, model.total - maxSteps + 1);\n\t\t\tendN = startN + maxSteps - 1;\n\t\t}\n\t\tvar inner = '';\n\t\tfor (var i = startN; i <= endN; i++) {\n\t\t\tvar done = i < model.current;\n\t\t\tvar active = i === model.current;\n\t\t\tvar future = i > model.current;\n\t\t\tvar cls = 'dpp-step' + (done ? ' is-done' : '') + (active ? ' is-active' : '') + (future ? ' is-future' : '');\n\t\t\tinner += '<a class=\"' + cls + '\" href=\"' + esc(model.urlFor(i)) + '\"><span class=\"dpp-step-node\">' + i + '<\/span><\/a>';\n\t\t\tif (i < endN) {\n\t\t\t\tinner += '<span class=\"dpp-step-line' + (i < model.current ? ' is-done' : '') + '\"><\/span>';\n\t\t\t}\n\t\t}\n\t\treturn '<div class=\"dpp-pagination dpp-style--steps\">' + inner + '<\/div>';\n\t}\n\n\t\/* ---------- Public API ---------- *\/\n\n\twindow.DPPRender = {\n\t\tpageList: pageList,\n\t\trender: function (model, opts) {\n\t\t\topts = opts || {};\n\t\t\tmodel.urlFor = model.urlFor || function () { return '#'; };\n\t\t\tswitch (opts.style) {\n\t\t\t\tcase 'pills':\n\t\t\t\t\treturn numbered(model, opts, 'pills', 1, 1);\n\t\t\t\tcase 'bordered':\n\t\t\t\t\treturn numbered(model, opts, 'bordered', 2, 1);\n\t\t\t\tcase 'dots':\n\t\t\t\t\treturn dots(model, opts);\n\t\t\t\tcase 'track':\n\t\t\t\t\treturn track(model, opts);\n\t\t\t\tcase 'compact':\n\t\t\t\t\treturn compact(model, opts);\n\t\t\t\tcase 'progress':\n\t\t\t\t\treturn progress(model, opts);\n\t\t\t\tcase 'steps':\n\t\t\t\t\treturn steps(model, opts);\n\t\t\t\tcase 'classic':\n\t\t\t\tdefault:\n\t\t\t\t\treturn numbered(model, opts, 'classic', 2, 1);\n\t\t\t}\n\t\t}\n\t};\n})(window);\n\n\/* ---------- Demo data ---------- *\/\nvar CATS = ['Bedtime','Sci-Fi','Technology','Fairy Tale','Adventure','Nature'];\nvar TITLES = [\n 'The Lighthouse at the Edge of Sleep','A Robot Who Learned to Dream','Why the Forest Whispers at Dusk',\n 'The Map Drawn in Starlight','Grandmother Moon and the Silver Fox','Engines of a Quiet Tomorrow',\n 'The Girl Who Collected Thunder','A Garden Beneath the City','The Clockmaker\u2019s Last Wish',\n 'Voyage to the Floating Islands','The Owl, the Meerkat and the Treasure','Letters from a Distant Planet',\n 'The Bridge Made of Songs','When the River Learned to Fly','A Lantern for the Long Night',\n 'The Cartographer of Dreams','Secrets of the Glass Mountain','The Boy Who Spoke to Storms',\n 'A Symphony for Sleepy Towns','The Last Library on Mars','Whispers in the Willow Grove',\n 'The Painter of Vanishing Colors','A Kite Above the Clouds','The Keeper of Forgotten Names',\n 'Moonlight on the Copper Sea','The Inventor and the Tiny Star','Tales from the Hollow Oak',\n 'The City That Slept for a Hundred Years','A Compass Pointing Home','The Festival of Falling Leaves'\n];\nvar EXCERPT = 'A gentle tale woven from quiet wonder and warm imagination, perfect for unwinding at the end of the day. Drift along as the story unfolds\u2026';\nvar POSTS = TITLES.map(function(t,i){\n var h = (i*37)%360;\n return { title:t, cat:CATS[i%CATS.length],\n thumb:'linear-gradient('+(120+i*15)%360+'deg, hsl('+h+',70%,62%), hsl('+((h+40)%360)+',72%,55%))' };\n});\nvar PER_PAGE = 6;\nvar TOTAL = Math.ceil(POSTS.length \/ PER_PAGE);\n\n\/* ---------- Themes (sady barev) ---------- *\/\nvar THEMES = [\n { name:'Violet', swatch:'linear-gradient(135deg,#7c3aed,#db2777)',\n vars:{'--dpp-accent':'linear-gradient(135deg,#7c3aed,#db2777)','--dpp-active-bg':'linear-gradient(135deg,#7c3aed,#db2777)','--dpp-active-text':'#fff','--dpp-shadow':'0 4px 14px -2px rgba(124,58,237,.3)','--dpp-active-border-color':'#7c3aed'} },\n { name:'Ocean', swatch:'linear-gradient(135deg,#0ea5e9,#2563eb)',\n vars:{'--dpp-accent':'linear-gradient(135deg,#0ea5e9,#2563eb)','--dpp-active-bg':'linear-gradient(135deg,#0ea5e9,#2563eb)','--dpp-active-text':'#fff','--dpp-shadow':'0 4px 14px -2px rgba(37,99,235,.3)','--dpp-active-border-color':'#2563eb'} },\n { name:'Sunset', swatch:'linear-gradient(135deg,#f59e0b,#ef4444)',\n vars:{'--dpp-accent':'linear-gradient(135deg,#f59e0b,#ef4444)','--dpp-active-bg':'linear-gradient(135deg,#f59e0b,#ef4444)','--dpp-active-text':'#fff','--dpp-shadow':'0 4px 14px -2px rgba(239,68,68,.3)','--dpp-active-border-color':'#ef4444'} },\n { name:'Emerald', swatch:'linear-gradient(135deg,#10b981,#059669)',\n vars:{'--dpp-accent':'linear-gradient(135deg,#10b981,#059669)','--dpp-active-bg':'linear-gradient(135deg,#10b981,#059669)','--dpp-active-text':'#fff','--dpp-shadow':'0 4px 14px -2px rgba(16,185,129,.3)','--dpp-active-border-color':'#059669'} },\n { name:'Mono', swatch:'linear-gradient(135deg,#374151,#111827)',\n vars:{'--dpp-accent':'linear-gradient(135deg,#374151,#111827)','--dpp-active-bg':'#111827','--dpp-active-text':'#fff','--dpp-shadow':'0 4px 14px -2px rgba(17,24,39,.3)','--dpp-active-border-color':'#111827'} }\n];\nvar STYLES = ['classic','pills','dots','bordered','track','compact','progress','steps'];\n\nvar state = { page:1, style:'classic', theme:0, radius:12, arrows:true };\n\n\/* ---------- Render ---------- *\/\nfunction renderGrid(){\n var start=(state.page-1)*PER_PAGE;\n var slice=POSTS.slice(start,start+PER_PAGE);\n document.getElementById('grid').innerHTML = slice.map(function(p){\n return '<article class=\"post\"><div class=\"thumb\" style=\"background:'+p.thumb+'\"><\/div>'+\n '<div class=\"post-body\"><div class=\"post-cat\">'+p.cat+'<\/div><h3>'+p.title+'<\/h3>'+\n '<p>'+EXCERPT+'<\/p><a class=\"more\" href=\"#\">read more \u2192<\/a><\/div><\/article>';\n }).join('');\n}\nfunction applyVars(el){\n el.style.setProperty('--dpp-radius', state.radius+'px');\n var v=THEMES[state.theme].vars;\n for(var k in v){ el.style.setProperty(k, v[k]); }\n}\nfunction renderPager(){\n var pager=document.getElementById('pager');\n pager.innerHTML = window.DPPRender.render(\n { current:state.page, total:TOTAL, urlFor:function(n){ return '#p'+n; } },\n { style:state.style, showPrevNext:state.arrows?1:0, prevLabel:'\\u2039', nextLabel:'\\u203a' }\n );\n var el=pager.querySelector('.dpp-pagination');\n if(el) applyVars(el);\n}\nfunction goTo(n){\n n=Math.max(1,Math.min(n,TOTAL));\n if(n===state.page) return;\n state.page=n; renderGrid(); renderPager();\n document.getElementById('grid').scrollIntoView({behavior:'smooth',block:'start'});\n}\n\n\/* ---------- Controls ---------- *\/\nfunction buildStyleBtns(){\n document.getElementById('styleBtns').innerHTML = STYLES.map(function(s){\n return '<button data-style=\"'+s+'\" class=\"'+(s===state.style?'active':'')+'\">'+s.charAt(0).toUpperCase()+s.slice(1)+'<\/button>';\n }).join('');\n}\nfunction buildThemeBtns(){\n document.getElementById('themeBtns').innerHTML = THEMES.map(function(t,i){\n return '<button title=\"'+t.name+'\" data-theme=\"'+i+'\" class=\"'+(i===state.theme?'active':'')+'\" style=\"background:'+t.swatch+'\"><\/button>';\n }).join('');\n}\n\ndocument.addEventListener('click', function(e){\n var a=e.target.closest('#pager a');\n if(a){ e.preventDefault(); if(a.classList.contains('is-disabled')) return;\n var m=(a.getAttribute('href')||'').match(\/#p(\\d+)\/); if(m) goTo(parseInt(m[1],10)); return; }\n var sb=e.target.closest('[data-style]');\n if(sb){ state.style=sb.getAttribute('data-style'); buildStyleBtns(); renderPager(); return; }\n var tb=e.target.closest('[data-theme]');\n if(tb){ state.theme=parseInt(tb.getAttribute('data-theme'),10); buildThemeBtns(); renderPager(); return; }\n});\ndocument.getElementById('radius').addEventListener('input', function(){ state.radius=parseInt(this.value,10); renderPager(); });\ndocument.getElementById('arrows').addEventListener('change', function(){ state.arrows=this.checked; renderPager(); });\n\nbuildStyleBtns(); buildThemeBtns(); renderGrid(); renderPager();\n<\/script><\/body><\/html><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Replace Divi’s plain page links with polished pagination \u2014 numbered pages, prev\/next, load-more or infinite scroll \u2014 all styled to match your design.<\/p>\n","protected":false},"author":1,"featured_media":41,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-37","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/akoenterprise.cz\/pluginsbysajmn\/wp-json\/wp\/v2\/pages\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/akoenterprise.cz\/pluginsbysajmn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/akoenterprise.cz\/pluginsbysajmn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/akoenterprise.cz\/pluginsbysajmn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/akoenterprise.cz\/pluginsbysajmn\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":4,"href":"https:\/\/akoenterprise.cz\/pluginsbysajmn\/wp-json\/wp\/v2\/pages\/37\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/akoenterprise.cz\/pluginsbysajmn\/wp-json\/wp\/v2\/pages\/37\/revisions\/43"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/akoenterprise.cz\/pluginsbysajmn\/wp-json\/wp\/v2\/media\/41"}],"wp:attachment":[{"href":"https:\/\/akoenterprise.cz\/pluginsbysajmn\/wp-json\/wp\/v2\/media?parent=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}