/* ==========================================================
   Just Debris — Log Slice Pagination Buttons (v2.1)
   Fixed position hover (no lift), smooth brown gradient
   ========================================================== */

:root{ --jd-frame:#C6B195; }

/* Row layout ------------------------------------------------ */
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce .nav-links {
  display:flex !important;
  gap:10px !important;
  justify-content:center !important;
  align-items:center !important;
  padding:0 !important;
  margin:18px 0 !important;
}

/* Core round “log slice” button shape ----------------------- */
.woocommerce nav.woocommerce-pagination :is(a,span).page-numbers,
.woocommerce .nav-links :is(a,span).page-numbers {
  inline-size:48px !important;
  block-size:48px !important;
  aspect-ratio:1/1 !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:999px !important;
  margin:0 6px !important;
  padding:0 !important;
  font-weight:700 !important;
  line-height:1 !important;
  color:#000 !important;
  text-decoration:none !important;
  border:none !important;

  /* wood rings */
  background:
    radial-gradient(circle at 52% 48%, #f7f2e8 0 28%, #ecdcc6 28% 56%, #e2cfae 56% 100%),
    repeating-radial-gradient(circle at 52% 48%, rgba(0,0,0,.10) 0 2px, rgba(0,0,0,0) 2px 6px) !important;

  /* gold rim + bevel */
  box-shadow:
    inset 0 0 0 2px var(--jd-frame),
    inset 0 2px 6px rgba(0,0,0,.15),
    0 1px 2px rgba(0,0,0,.25) !important;

  /* bumpy bark edge */
  -webkit-clip-path: polygon(
    50% 0%,61% 2%,71% 6%,79% 12%,86% 20%,91% 29%,94% 38%,95% 49%,
    94% 60%,91% 69%,86% 78%,79% 86%,71% 92%,61% 96%,50% 98%,
    39% 96%,29% 92%,21% 86%,14% 78%,9% 69%,6% 60%,5% 49%,
    6% 38%,9% 29%,14% 20%,21% 12%,29% 6%,39% 2%) !important;
  clip-path: polygon(
    50% 0%,61% 2%,71% 6%,79% 12%,86% 20%,91% 29%,94% 38%,95% 49%,
    94% 60%,91% 69%,86% 78%,79% 86%,71% 92%,61% 96%,50% 98%,
    39% 96%,29% 92%,21% 86%,14% 78%,9% 69%,6% 60%,5% 49%,
    6% 38%,9% 29%,14% 20%,21% 12%,29% 6%,39% 2%) !important;

  transition: all .4s ease;
}

/* Hover + focus — stays still, warm brown gradient ---------- */
.woocommerce nav.woocommerce-pagination a.page-numbers:hover,
.woocommerce .nav-links a.page-numbers:hover {
  color:#000 !important;
  background:
    radial-gradient(circle at 52% 48%, #e8dcc4 0 26%, #d1b88d 26% 56%, #b88b5e 56% 100%),
    repeating-radial-gradient(circle at 52% 48%, rgba(0,0,0,.15) 0 2px, rgba(0,0,0,0) 2px 6px) !important;
  box-shadow:
    inset 0 0 0 2px var(--jd-frame),
    inset 0 3px 10px rgba(0,0,0,.25),
    0 3px 10px rgba(198,177,149,.65),
    0 0 12px rgba(198,177,149,.45) !important;
  filter: saturate(1.1);
}

/* Current page highlight ------------------------------------ */
.woocommerce nav.woocommerce-pagination span.page-numbers.current,
.woocommerce .nav-links span.page-numbers.current {
  background:
    radial-gradient(circle at 52% 48%, #efe4d1 0 26%, #e2caa6 26% 56%, #d6b480 56% 100%),
    repeating-radial-gradient(circle at 52% 48%, rgba(0,0,0,.15) 0 2px, rgba(0,0,0,0) 2px 6px) !important;
  box-shadow:
    inset 0 0 0 3px var(--jd-frame),
    inset 0 4px 10px rgba(0,0,0,.22),
    0 2px 4px rgba(0,0,0,.25) !important;
}

/* Dots (ellipsis) smaller ----------------------------------- */
.woocommerce nav.woocommerce-pagination .page-numbers.dots,
.woocommerce .nav-links .page-numbers.dots {
  inline-size:38px !important;
  block-size:38px !important;
  font-weight:600 !important;
  opacity:.85 !important;
}

/* Compact on phones ----------------------------------------- */
@media (max-width:480px){
  .woocommerce nav.woocommerce-pagination :is(a,span).page-numbers,
  .woocommerce .nav-links :is(a,span).page-numbers {
    inline-size:42px !important;
    block-size:42px !important;
  }
}