/* =========================================================
   BUTTON SYSTEM — MAIN (DESKTOP) — FINAL (SIMPLE, NO JUMP)
   - Fixed size: 234w × 29h (desktop reference)
   - Always centered
   - Border width stays 4px (NO hover thickness change)
   - Radius: 5px
   - Stable vertical centering via flex
   - Link-safe (no underline, no visited color)
   - Text label remains free per button
   - SWAP applied: BACK COLLECTION ⇄ NEXT PERIOD
   ========================================================= */

/* Base */

a.btn-main, button.btn-main, .btn-main {
  box-sizing: border-box !important;
  width: 250px !important;
  height: 35px !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-style: solid !important;
  border-width: 4px !important;
  border-radius: 5px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

/* No underline ever */

a.btn-main:hover, a.btn-main:focus, a.btn-main:active, a.btn-main:visited, button.btn-main:hover, button.btn-main:focus, button.btn-main:active {
  text-decoration: none !important;
}

/* ---------- Variants ---------- */

/* BACK HOMEPAGE */

a.btn-main.btn-back-homepage, button.btn-main.btn-back-homepage, .btn-main.btn-back-homepage {
  background-color: #7C0E0E !important;
  border-color: #8E6C57 !important;
  color: #FDF6EB !important;
}

a.btn-main.btn-back-homepage:hover, button.btn-main.btn-back-homepage:hover, .btn-main.btn-back-homepage:hover {
  background-color: #A52A2A !important;
  border-color: #C78725 !important;
  color: #C78725 !important;
}

/* BACK COLLECTION (SWAPPED: former NEXT PERIOD) */

a.btn-main.btn-back-collection, button.btn-main.btn-back-collection, .btn-main.btn-back-collection {
  background-color: #F0E6D2 !important;
  border-color: #A67C52 !important;
  color: #3A2A1E !important;
}

a.btn-main.btn-back-collection:hover, button.btn-main.btn-back-collection:hover, .btn-main.btn-back-collection:hover {
  background-color: #D9C5A0 !important;
  border-color: #C78725 !important;
  color: #C78725 !important;
}

/* NEXT CHAPTER */

a.btn-main.btn-next-chapter, button.btn-main.btn-next-chapter, .btn-main.btn-next-chapter {
  background-color: #62483D !important;
  border-color: #C78725 !important;
  color: #FDF6EB !important;
}

a.btn-main.btn-next-chapter:hover, button.btn-main.btn-next-chapter:hover, .btn-main.btn-next-chapter:hover {
  background-color: #8E6C57 !important;
  border-color: #C78725 !important;
  color: #C78725 !important;
}

/* NEXT PERIOD (SWAPPED: former BACK COLLECTION) */

a.btn-main.btn-next-period, button.btn-main.btn-next-period, .btn-main.btn-next-period {
  background-color: #E0CFAA !important;
  border-color: #8B6B47 !important;
  color: #3D2B1F !important;
}

a.btn-main.btn-next-period:hover, button.btn-main.btn-next-period:hover, .btn-main.btn-next-period:hover {
  background-color: #C5A670 !important;
  border-color: #C5A670 !important;
  color: #F9D195 !important;
}

/* SIDEBAR */

a.btn-main.btn-sidebar, button.btn-main.btn-sidebar, .btn-main.btn-sidebar {
  background-color: #F3E6D6 !important;
  border-color: #8B0000 !important;
  color: #5D493C !important;
}

a.btn-main.btn-sidebar:hover, button.btn-main.btn-sidebar:hover, .btn-main.btn-sidebar:hover {
  background-color: #EAD8C3 !important;
  border-color: #8B0000 !important;
  color: #8B0000 !important;
}

/* ALTERNATIVE — OLD SIDEBAR STYLE */

a.btn-main.btn-alternative, button.btn-main.btn-alternative, .btn-main.btn-alternative {
  background-color: #8E6C57 !important;
  border-color: #FAC16A !important;
  color: #FDF6EB !important;
}

a.btn-main.btn-alternative:hover, button.btn-main.btn-alternative:hover, .btn-main.btn-alternative:hover {
  background-color: #8E6C57 !important;
  border-color: #FAC16A !important;
  color: #FAC16A !important;
}

/* =========================================================
   PARASKINIA BUTTONS — PAGE-SPECIFIC WIDTH
   - Only affects buttons explicitly marked as paraskinia buttons
   - Does NOT affect normal gallery / text / homepage buttons
   ========================================================= */

a.btn-main.btn-paraskinia, button.btn-main.btn-paraskinia, .btn-main.btn-paraskinia {
  width: 320px !important;
}